Frontend

Widget SDK

A zero-dependency, <50KB JavaScript SDK that embeds AI support into any web page. Shadow DOM ensures style isolation.

Basic Setup

Add two script tags to any page. The widget creates a floating action button (FAB) that opens an AI-powered chat interface.

HTML

<script src="https://cdn.yourdomain.com/ai-support-widget.js"></script><script>  AISupportWidget.init({    tenantKey: 'ten_your_key',    jwt: yourUserJwt,    theme: 'light',    position: 'bottom-right',    onTokenRefresh: async () => {      const res = await fetch('/api/support/token', { credentials: 'include' });      const { token } = await res.json();      return token;    },  });</script>

Configuration

Option	Type	Req	Description
tenantKey	string	Yes	Your tenant ID (ten_xxx). Get this from the Admin Dashboard.
jwt	string	Yes	JWT signed by your backend. See Authentication guide.
theme	'light' \| 'dark'	No	Widget color theme. Default: light.
position	'bottom-right' \| 'bottom-left'	No	FAB button position on screen. Default: bottom-right.
onTokenRefresh	() => Promise<string>	No	Called when JWT expires (401). Return a fresh token string.

SPA Frameworks

For React, Vue, or Angular apps, initialize the widget after the component mounts and destroy it on unmount to avoid memory leaks.

JavaScript

// React / Vue / Angular — initialize after mountuseEffect(() => {  const widget = AISupportWidget.init({    tenantKey: 'ten_your_key',    jwt: user.supportToken,    theme: prefersDark ? 'dark' : 'light',    position: 'bottom-right',  });  return () => widget.destroy();}, [user.supportToken]);

How It Works

Shadow DOM

Widget styles are fully isolated. Your CSS won't break the widget, and vice versa.

Zero Dependencies

Pure TypeScript, no React/Vue/jQuery required. Works with any framework or vanilla JS.

Single JS File

Builds to <50KB gzipped. One script tag is all you need — no CSS imports.

Token Refresh

Automatic JWT renewal via onTokenRefresh callback. Users never see auth errors.

Widget Lifecycle

init()                    // Mount widget into DOM (Shadow DOM)
  ├─ Create FAB button    // Floating action button
  ├─ Attach event listeners
  └─ Ready

User clicks FAB
  ├─ Open chat panel
  ├─ POST /api/cases      // Create support case
  └─ Receive AI response  // With evidence + suggested actions

onTokenRefresh()          // Called on 401 (token expired)
  └─ Retry failed request

destroy()                 // Unmount widget, clean up listeners