Website Widgets
Embed your voice agent on any website so visitors can start a voice conversation directly from the browser. The Widgets tab provides embed codes, customization options, and domain security settings.
Widget Types
Hanc.AI offers four widget types:
| Widget | Tag Name | Description | Best For |
|---|---|---|---|
| Inline Widget | hanc-ai-inline-call | Full-size call button embedded in page content | Dedicated "Talk to Us" sections |
| Pill Widget | hanc-ai-pill-call | Compact inline button | Minimal footprint, inline placement |
| Pill Floating Widget | hanc-ai-pill-floating-call | Compact button that floats over the page | Minimal floating call-to-action |
| Floating Widget | hanc-ai-floating-call | Button that floats over your page | Always-visible call-to-action |
Color Theme
Customize widget appearance with 10 built-in color themes:
| Theme | Color |
|---|---|
| Default | Indigo |
| Purple | Purple |
| Blue | Blue |
| Cyan | Cyan |
| Emerald | Green |
| Amber | Yellow |
| Rose | Pink |
| Orange | Orange |
| Black | Black |
| White | White |
Select a theme and it applies to all widget types. The theme is set via the theme attribute in the embed code.
Inline Widget
Embeds a full-size call button directly into your page content.
Embed Code
<hanc-ai-inline-call agent-id="YOUR_AGENT_ID"></hanc-ai-inline-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
With Theme
<hanc-ai-inline-call agent-id="YOUR_AGENT_ID" theme="blue"></hanc-ai-inline-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Features
- Integrates into your page layout
- Can be placed anywhere in your HTML
- Responsive design
- Shows call duration and controls
Pill Widget
A compact call button that embeds within your page content:
<hanc-ai-pill-call agent-id="YOUR_AGENT_ID"></hanc-ai-pill-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Pill Floating Widget
A compact call button that floats over the page (usually bottom-right corner):
<hanc-ai-pill-floating-call agent-id="YOUR_AGENT_ID"></hanc-ai-pill-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
Floating Widget
A standalone button that floats on your page, always visible to visitors.
<hanc-ai-floating-call agent-id="YOUR_AGENT_ID"></hanc-ai-floating-call>
<script src="https://unpkg.com/hanc-webrtc-widgets" async type="text/javascript"></script>
- Appears as a floating call button (usually bottom-right)
- Exists outside your page layout
- Always visible regardless of scroll position
- Minimal impact on page design
Technical Requirements
Widgets require the visitor's browser to support:
- WebGL 2.0 — for rendering
- Web Audio API — for audio processing
- WebRTC — for real-time voice communication
All modern browsers (Chrome, Firefox, Safari, Edge) support these technologies.
Allowed Domains
Control which websites can embed your agent widget.
Allow All Domains
By default, your widget can be embedded on any website. Toggle "Allow all domains" to restrict this.
Restrict to Specific Domains
When restricted, add each domain that should be allowed:
- Enter domain names without
https://(e.g.,example.com) - Subdomains need separate entries (e.g.,
www.example.com,shop.example.com) - Ports can be specified (e.g.,
localhost:3000)
For production agents, restrict widgets to your own domains to prevent unauthorized embedding.
Terms & Conditions
Enable a consent dialog before callers can start a conversation.
Configuration
| Setting | Description |
|---|---|
| Enable Terms | Toggle terms dialog on/off |
| Terms Content | Markdown-formatted consent text shown to users |
| Terms URL | Link to your full Terms & Conditions page |
| Privacy URL | Link to your Privacy Policy page |
When enabled:
- Users see a consent dialog before starting a call
- They must click "Agree" to proceed
- Consent is stored locally in the browser
- Reset Consent button clears stored consent for testing
Content Formatting
Terms content supports Markdown formatting:
- Use
####for headings - Use
**bold**for emphasis - Use line breaks for readability
Widget Events
Widgets emit two events that you can listen for in JavaScript:
| Event | Description |
|---|---|
call-start | Fired when the user starts a call |
call-end | Fired when the call ends |
Related
- Voice Agents Overview
- Integrations — API keys and Twilio setup