Examples

Practical examples of integrating the Metreek SDK.

Basic Dashboard

A simple dashboard with widgets and chat:

dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Dashboard</title>
  <style>
    .dashboard { max-width: 1200px; margin: 0 auto; padding: 20px; }
    .widget-container { margin-bottom: 20px; }
  </style>
</head>
<body>
  <div class="dashboard">
    <h1>Sales Dashboard</h1>

    <div class="widget-container">
      <metreek-widget
        query-id="sales-overview"
        block-id="monthly-sales"
        customer-uid="cust-123"
        show-title="true">
      </metreek-widget>
    </div>

    <div class="widget-container">
      <metreek-widget
        query-id="sales-overview"
        block-id="top-products"
        customer-uid="cust-123"
        show-title="true">
      </metreek-widget>
    </div>
  </div>

  <!-- Floating chat -->
  <metreek-chat
    customer-uid="cust-123"
    position="bottom-right">
  </metreek-chat>

  <script src="https://cdn.jsdelivr.net/npm/@metreek/frontend-sdk@latest/dist/metreek-sdk.min.js"></script>
  <script>
    MetreekSDK.init({
      apiKey: 'wk_YOUR_API_KEY',
      baseUrl: 'https://api.metreek.com',
      customerUid: 'cust-123'
    })
  </script>
</body>
</html>

Multiple Widgets Grid

Display multiple widgets in a responsive grid layout:

widget-grid.html

<style>
  .widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  metreek-widget {
    min-height: 300px;
  }
</style>

<div class="widget-grid">
  <metreek-widget
    query-id="analytics"
    block-id="visitors"
    customer-uid="cust-123">
  </metreek-widget>

  <metreek-widget
    query-id="analytics"
    block-id="conversions"
    customer-uid="cust-123">
  </metreek-widget>

  <metreek-widget
    query-id="analytics"
    block-id="revenue"
    customer-uid="cust-123">
  </metreek-widget>

  <metreek-widget
    query-id="analytics"
    block-id="growth"
    customer-uid="cust-123">
  </metreek-widget>
</div>

Auto-Refresh Dashboard

Widgets that automatically refresh at intervals:

HTML

<!-- Refresh every 30 seconds -->
<metreek-widget
  query-id="live-data"
  block-id="active-users"
  customer-uid="cust-123"
  auto-refresh="30000">
</metreek-widget>

<!-- Refresh every minute -->
<metreek-widget
  query-id="live-data"
  block-id="transactions"
  customer-uid="cust-123"
  auto-refresh="60000">
</metreek-widget>

React Integration

Using Metreek in a React application:

Dashboard.jsx

import { useEffect, useRef } from 'react'

function Dashboard({ customerId }) {
  const widgetRef = useRef(null)

  useEffect(() => {
    // Initialize SDK
    if (window.MetreekSDK) {
      window.MetreekSDK.init({
        apiKey: process.env.REACT_APP_METREEK_KEY,
        baseUrl: 'https://api.metreek.com',
        customerUid: customerId
      })
    }

    // Listen to widget events
    const widget = widgetRef.current
    const handleClick = (e) => {
      console.log('Chart clicked:', e.detail)
    }

    widget?.addEventListener('chart:click', handleClick)
    return () => widget?.removeEventListener('chart:click', handleClick)
  }, [customerId])

  return (
    <div className="dashboard">
      <h1>Analytics</h1>

      <metreek-widget
        ref={widgetRef}
        query-id="analytics"
        block-id="overview"
        customer-uid={customerId}
      />

      <metreek-chat
        customer-uid={customerId}
        position="bottom-right"
      />
    </div>
  )
}

export default Dashboard

Vue 3 Integration

Using Metreek in a Vue 3 application:

Dashboard.vue

<template>
  <div class="dashboard">
    <h1>Analytics</h1>

    <metreek-widget
      ref="widgetRef"
      :query-id="queryId"
      :block-id="blockId"
      :customer-uid="customerId"
      @widget:loaded="onWidgetLoaded"
      @chart:click="onChartClick"
    />

    <metreek-chat
      :customer-uid="customerId"
      position="bottom-right"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  customerId: String,
  queryId: String,
  blockId: String
})

const widgetRef = ref(null)

onMounted(() => {
  if (window.MetreekSDK) {
    window.MetreekSDK.init({
      apiKey: globalThis._importMeta_.env.VITE_METREEK_KEY,
      baseUrl: 'https://api.metreek.com',
      customerUid: props.customerId
    })
  }
})

const onWidgetLoaded = (event) => {
  console.log('Widget loaded:', event.detail)
}

const onChartClick = (event) => {
  console.log('Chart clicked:', event.detail.params)
}
</script>

Advanced Event Handling

Handle chart clicks and navigation:

events.js

// Initialize
MetreekSDK.init({
  apiKey: 'wk_YOUR_API_KEY',
  baseUrl: 'https://api.metreek.com',
  customerUid: 'cust-123'
})

// Wait for SDK to be ready
MetreekSDK.on('sdk:initialized', () => {
  console.log('SDK ready, version:', MetreekSDK.version)
})

// Handle chart clicks for drill-down
document.querySelectorAll('metreek-widget').forEach(widget => {
  widget.addEventListener('chart:click', (e) => {
    const { params } = e.detail

    // Example: Navigate to detail page
    if (params.seriesName === 'Sales') {
      window.location.href = `/sales/${params.data.id}`
    }
  })
})

// Handle widget errors
document.querySelectorAll('metreek-widget').forEach(widget => {
  widget.addEventListener('widget:error', (e) => {
    console.error('Widget failed:', e.detail.error)
    // Show fallback UI
    widget.innerHTML = '<div class="error">Failed to load data</div>'
  })
})

Programmatic Chat

Control the chat from your application:

chat-control.js

// Open chat when user clicks help button
document.getElementById('help-btn').addEventListener('click', () => {
  MetreekSDK.chat.open()
})

// Send a pre-defined question
document.getElementById('quick-question').addEventListener('click', () => {
  MetreekSDK.chat.open()
  MetreekSDK.chat.sendMessage('What were my top products last month?')
})

// Listen for AI responses
const chat = document.querySelector('metreek-chat')
chat.addEventListener('message:received', (e) => {
  // Log responses for analytics
  analytics.track('ai_response', {
    messageId: e.detail.messageId,
    timestamp: new Date()
  })
})

// Clear chat when user logs out
function logout() {
  MetreekSDK.chat.clear()
  // ... other logout logic
}

Custom Styling

Customize component appearance:

metreek-custom.css

/* Widget container customization */
metreek-widget {
  --metreek-widget-border-radius: 12px;
  --metreek-widget-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --metreek-widget-padding: 20px;
}

/* Chat positioning and sizing */
metreek-chat {
  --metreek-chat-width: 400px;
  --metreek-chat-height: 600px;
  --metreek-chat-border-radius: 16px;
}

/* Override for specific widgets */
#sales-widget {
  --metreek-widget-min-height: 500px;
}

/* Dark theme overrides */
[data-theme="dark"] metreek-widget {
  --metreek-widget-bg: #1f2937;
  --metreek-widget-text: #f9fafb;
}

Need more examples?

Check out our GitHub examples repository for more integration patterns and use cases.