Installation

Get the Metreek Frontend SDK set up in your project.

Via CDN (Recommended)

The fastest way to get started. Add this script tag to your HTML:

HTML

<!-- Add to your HTML <head> or before </body> -->
<script src="https://cdn.jsdelivr.net/npm/@metreek/frontend-sdk@latest/dist/metreek-sdk.min.js"></script>

Version Pinning

For production, we recommend pinning to a specific version: @metreek/frontend-sdk@1.0.1

Via NPM

For projects using a build system:

Bash

npm install @metreek/frontend-sdk

Or with yarn:

Bash

yarn add @metreek/frontend-sdk

Then import in your JavaScript:

main.js

import MetreekSDK from '@metreek/frontend-sdk'

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

Framework Integration

React

App.jsx

import { useEffect } from 'react'

function App() {
  useEffect(() => {
    // Initialize SDK after component mounts
    if (window.MetreekSDK) {
      window.MetreekSDK.init({
        apiKey: 'wk_YOUR_API_KEY',
        baseUrl: 'https://api.metreek.com',
        customerUid: 'your-customer-id'
      })
    }
  }, [])

  return (
    <div>
      <h1>My Dashboard</h1>

      {/* Web Components work directly in JSX */}
      <metreek-widget
        query-id="your-query-id"
        block-id="your-block-id"
        customer-uid="your-customer-id"
      />

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

Vue 3

App.vue

<template>
  <div>
    <h1>My Dashboard</h1>

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

    <metreek-chat
      customer-uid="your-customer-id"
      position="bottom-right"
    />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  if (window.MetreekSDK) {
    window.MetreekSDK.init({
      apiKey: 'wk_YOUR_API_KEY',
      baseUrl: 'https://api.metreek.com',
      customerUid: 'your-customer-id'
    })
  }
})
</script>

Vue treats Web Components as custom elements automatically. No additional configuration needed.

Next.js

pages/_app.js

import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://cdn.jsdelivr.net/npm/@metreek/frontend-sdk@latest/dist/metreek-sdk.min.js"
        onLoad={() => {
          window.MetreekSDK.init({
            apiKey: 'wk_YOUR_API_KEY',
            baseUrl: 'https://api.metreek.com',
            customerUid: 'your-customer-id'
          })
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

Nuxt 3

plugins/metreek.client.ts

// plugins/metreek.client.ts
export default defineNuxtPlugin(() => {
  // Load SDK script
  const script = document.createElement('script')
  script.src = 'https://cdn.jsdelivr.net/npm/@metreek/frontend-sdk@latest/dist/metreek-sdk.min.js'
  script.onload = () => {
    window.MetreekSDK.init({
      apiKey: 'wk_YOUR_API_KEY',
      baseUrl: 'https://api.metreek.com',
      customerUid: 'your-customer-id'
    })
  }
  document.head.appendChild(script)
})

Verify Installation

After installation, verify everything is working:

JavaScript

// Open browser console and run:
console.log('Metreek SDK version:', MetreekSDK.version)

// Should output: "Metreek SDK version: 1.0.1"

Ready!

Once you see your version logged, the SDK is ready. Continue to Configuration to set up your API key.