Skip to content

Website Widget

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

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=12345

Widget 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

  1. Widget loads on the page and fetches the public agent configuration
  2. User clicks to start a conversation
  3. Widget requests a dispatch token from the backend
  4. LiveKit room is created, agent is dispatched
  5. Widget connects to the room via WebRTC
  6. Voice conversation begins in real time
  7. 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