External Widget
Deployment Guide

1. Log in as an Admin.
2. Navigate to Deployment from the main dashboard menu.
3. Select the tenant you want to deploy from the dropdown list.

WDG-01

The Deployment page with the tenant dropdown open and a tenant selected from the list

Once a tenant is selected, the Widget Settings panel appears. Configure the visual appearance of the chat widget here.

Click "Save Settings" when done. A confirmation notification will appear.

WDG-02

The Widget Settings panel with all fields filled in, color pickers visible, and a logo preview displayed

Tokens are the security keys that authorize your widget to connect to the chatbot service. You need at least one token before deploying.

1. Click "Add New Token" in the tokens section.
2. Enter a Token Name — a human-readable label identifying where this token is used (e.g., "Production Website", "Staging Site").
3. Optionally enter Allowed Domains to restrict the token to specific websites. Leave empty for testing environments.
4. Click "Create" to generate the token.

WDG-03

The "Create Token" form with Token Name filled in as "Production Website" and Allowed Domains field showing domain restrictions

WDG-04

The token list after creation, showing the new token with its name, masked token value, Active badge, and action buttons

Once a token is created, four deployment methods are available. Choose the one that fits your use case.

<!-- Add this script to your website -->
<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://yourdomain.com/widget.js';
    script.setAttribute('data-token', 'wgt_your_token_here');
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

<iframe
  src="https://yourdomain.com/widget?token=wgt_your_token_here"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
></iframe>

const response = await fetch(
  'https://your-project.supabase.co/functions/v1/intelligent-chat',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-widget-token': 'wgt_your_token_here'
    },
    body: JSON.stringify({
      message: 'Hello!',
      sessionId: null  // pass a previous sessionId to continue a conversation
    })
  }
);

const data = await response.json();
console.log(data.message);    // the AI's response text
console.log(data.sessionId);  // save this to maintain conversation continuity

Each token appears in a list with its status, usage statistics, and management actions.

Best Practices

• Create one token per deployment environment (separate tokens for production and staging)
• Set domain restrictions on production tokens to prevent unauthorized use
• Disable rather than delete tokens when taking a deployment offline — preserves usage history
• For multiple websites on the same client, create a separate token per site for independent tracking