@vizkraft/embed

Frontend SDK for embedding Vizkraft dashboards with liquid-tag tenant isolation.

Install

npm install @vizkraft/embed

Usage

Your backend mints a short-lived session (API key never in the browser):

POST /api/embed/session
Authorization: Bearer vk_embed_...
{ "embedId": "emb_...", "liquid": { "customer_id": "C1" } }

Your frontend mounts the SDK with a getSessionToken callback. The SDK refreshes before expiry and on auth errors:

import { VizkraftEmbed } from '@vizkraft/embed'

const handle = VizkraftEmbed.mount({
  container: '#analytics',
  embedId: 'emb_...',
  getSessionToken: async () => {
    const r = await fetch('/api/vizkraft-embed-session')
    const { sessionToken } = await r.json()
    return sessionToken
  },
  onError: (e) => console.error(e),
})

// later
handle.unmount()

postMessage contract

| Type | Direction | Purpose | |------|-----------|---------| | vizkraft:ready | viewer → host | Viewer loaded | | vizkraft:resize | viewer → host | { height } for auto-resize | | vizkraft:error | viewer → host | auth / rate_limit / missing_liquid | | vizkraft:setTheme | host → viewer | { theme: 'light' \| 'dark' } |

Origins are checked on both sides; never use *.

Publish

cd packages/embed-sdk
npm publish --access public