Voice Widget

Let website visitors talk to your voice agent directly from the browser — no phone number needed. The voice widget adds a call button to your site that connects users via WebRTC for real-time voice conversations.

Quick Setup

Add the voice widget to any webpage:

<script src="https://cdn.thinnest.ai/widget.js"></script>
<script>
  ThinnestAI.init({
    agentId: 'YOUR_AGENT_ID',
    apiKey: 'YOUR_PUBLIC_KEY',
    position: 'bottom-right',
    theme: 'light',
    greeting: 'Click to talk to our AI assistant'
  });
</script>

A floating call button appears. When clicked, the browser connects to your voice agent via WebRTC.

How It Works

User clicks voice button on your website
        ↓
Browser requests microphone permission
        ↓
WebRTC connection established with thinnestAI
        ↓
User speaks → STT → Agent processes → TTS → User hears response
        ↓
Call ends when user clicks "Hang up"

No phone network is involved — audio travels directly over the internet. Works on all modern browsers (Chrome, Firefox, Safari, Edge).

Widget Configuration

Passing Context

Send page or user context to your agent:

<script>
  ThinnestAI.init({
    agentId: 'agent_xyz',
    apiKey: 'pk_live_abc',
    context: {
      user_name: 'Jane Doe',
      page: 'pricing',
      plan: 'payg'
    }
  });
</script>

Your agent can use this context in its responses (e.g., "Hi Jane, I see you're looking at the PAYG plan").

React Component

For React applications:

import { ThinnestVoiceWidget } from '@thinnest/embed-sdk';

function App() {
  return (
    <ThinnestVoiceWidget
      agentId="agent_xyz"
      apiKey="pk_live_abc"
      position="bottom-right"
      theme="light"
      onCallStart={(sessionId) => {
        console.log('Call started:', sessionId);
      }}
      onCallEnd={(sessionId, duration) => {
        console.log('Call ended, duration:', duration);
      }}
    />
  );
}

React Props

Combined Chat + Voice Widget

Deploy both chat and voice on the same page — the embed widget supports both modes:

<!-- Chat widget with voice enabled -->
<script
  src="https://app.thinnest.ai/embed.js"
  data-agent-id="YOUR_AGENT_ID"
  data-voice-enabled="true"
  async
></script>

Users can choose to type or speak. The widget shows both a text input and a microphone button.

Browser Requirements

Permissions

The browser will ask for microphone permission on the first call. Users must grant access for the voice widget to work. If denied, the widget shows an error message.

Audio Quality

The voice widget uses:

• Opus codec for efficient audio compression
• Echo cancellation built into WebRTC
• Noise suppression for cleaner input
• Adaptive bitrate based on network conditions

For best quality, recommend users use headphones or a quiet environment.

vs Phone Calls

Use the voice widget for website visitors. Use phone calls when you need to reach users on their phones.

Troubleshooting