Web Widget
Embed Tavio's AI chat widget on any website with a single script tag. The widget supports real-time streaming responses via SSE and automatically inherits your tenant's theme.
Installation
Add the following script tag to your HTML, just before the closing </body> tag:
<script
src="https://bankmind.aihookd.site/widget.js"
data-key="YOUR_WIDGET_TOKEN"
data-position="bottom-right"
defer
></script>The widget will render a floating chat button in the bottom-right corner. No additional CSS or JavaScript is required.
Widget Token
Widget tokens are HMAC-signed base64url strings that authenticate widget requests without exposing your API key. Generate them server-side:
import { generateWidgetToken } from "@/lib/widget-token";
// Generate on your server, pass to your frontend
const token = generateWidgetToken({
tenantId: "tenant_abc123",
channelId: "channel_widget_001",
});You can also generate and copy the token from the Channels page in the dashboard. Token rotation is supported — old tokens are invalidated when you generate a new one.
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
| /api/v1/widget/init | POST | Initialize widget session |
| /api/v1/widget/message | POST | Send message, receive SSE stream |
Customization
The widget automatically inherits your tenant's branding:
- Primary color from your tenant theme settings
- Institution name displayed in the chat header
- Custom welcome message from your AI agent configuration
- Light and dark mode based on user's system preference
Configure these in Dashboard > Settings > Branding.
SSE Streaming
The widget uses Server-Sent Events (SSE) for real-time streaming responses. Each message is delivered token-by-token for a natural typing experience.
data: {"content": "Hello", "done": false, "conversationId": "conv_123"}
data: {"content": ", how", "done": false, "conversationId": "conv_123"}
data: {"content": " can I help?", "done": true, "conversationId": "conv_123"}CORS
All widget endpoints include CORS headers. The widget validates the origin against your tenant's allowed domains. Add your domains in Dashboard > Channels > Widget > Allowed Origins.