Quick Start

Get Metreek integrated into your application in under 5 minutes.

This guide covers the basics. For more detailed information, check the Frontend SDK documentation.

Step 1: Include the SDK

Add the Metreek SDK to your HTML page. You can use our CDN or install via npm.

Via CDN (Recommended)

index.html
<script src="https://cdn.jsdelivr.net/npm/@metreek/frontend-sdk@latest/dist/metreek-sdk.min.js"></script>

Via NPM

Bash
npm install @metreek/frontend-sdk
main.js
import MetreekSDK from '@metreek/frontend-sdk'

Step 2: Initialize the SDK

Initialize Metreek with your API key and configuration options.

JavaScript
MetreekSDK.init({
  apiKey: 'wk_YOUR_API_KEY',
  baseUrl: 'https://api.metreek.com',
  customerUid: 'your-customer-id',
  debug: true, // Enable for development
  chat: {
    enabled: true,
    position: 'bottom-right'
  }
})

API Key Required

You'll need a valid API key to use the SDK. Contact us at hello@metreek.com to get your API key.

Step 3: Add Components

Add Metreek components to your HTML. Here are the main components available:

Chat Component

Add an AI-powered chat interface to your page.

HTML
<metreek-chat
  customer-uid="your-customer-id"
  position="bottom-right"
  theme="auto">
</metreek-chat>

Widget Component

Display interactive data visualizations.

HTML
<metreek-widget
  query-id="your-query-id"
  block-id="your-block-id"
  customer-uid="your-customer-id"
  show-title="true"
  show-controls="true">
</metreek-widget>

Step 4: Interact Programmatically

Control components and listen to events using the JavaScript API.

JavaScript
// Open/close chat programmatically
MetreekSDK.chat.open()
MetreekSDK.chat.close()

// Send a message
MetreekSDK.chat.sendMessage('What are my top products?')

// Refresh widgets
MetreekSDK.widget.refreshAll()

// Listen to events
MetreekSDK.on('message:received', (event) => {
  console.log('AI Response:', event.detail.message)
})

Complete Example

Here's a complete HTML page with Metreek integrated:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App with Metreek</title>
</head>
<body>
  <h1>Dashboard</h1>

  <!-- Widget -->
  <metreek-widget
    query-id="your-query-id"
    block-id="your-block-id"
    customer-uid="your-customer-id">
  </metreek-widget>

  <!-- Chat (floating) -->
  <metreek-chat
    customer-uid="your-customer-id"
    position="bottom-right">
  </metreek-chat>

  <!-- SDK -->
  <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: 'your-customer-id'
    })
  </script>
</body>
</html>

Next Steps