Website Widget
Embeddable web component for adding a voice agent to any website
Speaknode provides an embeddable web component that adds a voice agent to any website.
Overview
The widget is an Angular web component packaged as <speaknode-agent>. It connects to a published agent and allows website visitors to have a voice conversation directly in the browser.
Installation
Place the custom element where you want the widget to appear, and add the loader script anywhere on the page (typically right after the element or before </body>):
<speaknode-agent agent-id="your-agent-id"></speaknode-agent>
<script src="https://app-widget.speaknode.com/speaknode-widget-loader.js"></script>The loader registers the <speaknode-agent> custom element, fetches the published agent configuration, and renders the widget once the user clicks to start a conversation.
Configuration
Attributes
| Attribute | Type | Description |
|---|---|---|
agent-id | string | ID of the published agent |
agent-token | string | Pre-generated JWT token (optional) |
language | string | Override language locale |
initialized | boolean | Use external configuration mode |
Passing Variables via URL
Dynamic variables can be passed as URL query parameters. The widget reads them automatically and passes to the agent at dispatch time.
Example:
https://yoursite.com/page?customer_name=John&order_id=12345Widget Configuration in Admin Panel
In the agent edit page, the Widget tab allows you to:
- Configure widget placement and appearance
- Generate embed code
- Set custom theme colors
How It Works
- Widget loads on the page and fetches the public agent configuration
- User clicks to start a conversation
- Widget requests a dispatch token from the backend
- LiveKit room is created, agent is dispatched
- Widget connects to the room via WebRTC
- Voice conversation begins in real time
- When the conversation ends, the session is saved
Requirements
- The agent must be published (
is_published: true) - The user's browser must support WebRTC
- Microphone access is required