Website Widget
Embeddable web component for adding a voice agent to any website
Voxagent 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
Add the widget script to your website and place the custom element:
<speaknode-agent agent-id="your-agent-id"></speaknode-agent>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