TTS.ai Voice Chat Widget

Embeddable AI voice chat widget for TTS.ai. Add a voice AI agent to any website with one line of code.

Quick Start

Add this script tag to your HTML:

<script src="https://tts.ai/widget/chat.js" data-agent="your-agent-slug"></script>

A chat bubble will appear in the bottom-right corner. Visitors can click it to interact with your AI voice agent.

Setup

1. Create an AI voice agent at tts.ai/agents/manage/
2. Configure the agent's personality, voice, and knowledge base
3. Copy the embed code from your agent's settings
4. Paste it into your website's HTML

Options

Configure the widget using data attributes on the script tag:

<script
  src="https://tts.ai/widget/chat.js"
  data-agent="your-agent-slug"
  data-position="left"
  data-color="#4a90d9"
  data-title="Sales Assistant"
  data-greeting="Welcome! How can I help?"
></script>

Attribute	Default	Description
data-agent	(required)	Your agent's unique slug
data-position	right	Widget position: right or left
data-color	#e60000	Accent color for bubble and header
data-title	Chat with us	Chat window header title
data-greeting	Hi! How can I help you?	Initial greeting message

Self-Hosting

You can self-host the widget script instead of loading it from tts.ai:

<script src="/path/to/widget.js" data-agent="your-agent-slug"></script>

The widget auto-detects its base URL from the script src attribute.

Features

• Zero dependencies, vanilla JavaScript
• Responsive design (full-screen on mobile)
• Lazy-loads chat iframe on first open
• Microphone support for voice input
• Customizable colors and position
• Works with custom agents and built-in templates

Agent Types

TTS.ai provides 15 built-in agent templates:

• Customer Support - Handle inquiries and troubleshooting
• Sales - Qualify leads and answer product questions
• Receptionist - Greet visitors and route conversations
• Tutor - Educational assistance and explanations
• See all templates

Knowledge Base

Upload documents (.txt, .md, .pdf) to your agent's knowledge base for RAG-powered answers based on your content.

Phone Integration

Agents can also be connected to phone numbers via Twilio. Configure at tts.ai/agents/manage/.

License

MIT