Overview
The chat widget comes with several interactive features designed to create an engaging and accessible experience for your website visitors. These features work together to provide a conversational AI experience that feels natural and intuitive.Audio Responses
Text-to-speech capability with lip-synced avatar animations.
Language Switching
Real-time language switching with automatic translation.
Conversation Reset
Start fresh conversations with a single click.
3D Avatar
Interactive animated character for visual engagement.
Audio Responses (Text-to-Speech)
The chat widget can speak AI responses aloud using text-to-speech technology, creating a more engaging and accessible experience. When enabled, the 3D avatar animates with lip-sync movements that match the spoken audio.How Audio Works
When the avatar panel is open and audio is enabled:- The AI generates a text response to your visitor’s question
- The response is sent to the TTS (text-to-speech) service
- Audio is synthesized and played back through the browser
- The 3D avatar lip-syncs to the audio in real-time
Audio playback only triggers when the avatar panel is visible. If the panel is closed or showing the language selector, responses remain text-only.
Supported TTS Providers
The widget supports two text-to-speech providers:| Provider | Description |
|---|---|
| Microsoft Azure | High-quality neural voices with extensive language support and viseme data for lip-sync |
| ElevenLabs | Premium AI voices with natural intonation and expressive speech |
Audio Controls
Audio behavior is controlled at the widget level:- Avatar Panel Toggle - When the avatar panel is open, audio plays automatically for new responses
- Stop Speaking - Closing the avatar panel or starting a new message stops any ongoing audio
- Mobile Behavior - Audio is disabled on mobile devices to optimize the experience
Language Switching
The chat widget supports real-time language switching, allowing visitors to interact in their preferred language. This feature provides automatic translation of the interface and AI responses.Accessing the Language Selector
On Desktop:- Click the flag icon in the chat header
- The language panel opens alongside the chat
- Select your preferred language from the list
- The panel automatically closes after selection
- Tap the flag icon in the chat header
- The language list displays full-screen
- Select your preferred language
- You’re returned to the chat view
What Gets Translated
When a visitor switches languages:| Element | Translation Behavior |
|---|---|
| Welcome Message | Automatically translated to the new language |
| Suggested Questions | Translated to help visitors discover topics |
| Interface Text | Buttons, placeholders, and labels update instantly |
| AI Responses | Future responses come in the selected language |
| System Messages | Language change confirmation appears in the new language |
Previous conversation messages remain in their original language. Only new messages and the welcome message are translated when switching languages.
Language Persistence
The widget remembers your visitor’s language preference:Configuring Available Languages
Control which languages appear in the selector through your agent’s Localization settings:- Enable/Disable Languages - Choose which languages to offer
- Set Default Language - Configure the fallback for unsupported browser languages
- Exclude Languages - Remove specific languages from the selector entirely
Conversation Reset
The reset feature allows visitors to start a fresh conversation at any time. This clears the current chat history and displays a new welcome message.Using the Reset Feature
- Click the rotate/refresh icon in the chat header
- The conversation is immediately cleared
- A new welcome message appears
- The visitor can start asking new questions
What Reset Does
| Action | Behavior |
|---|---|
| Messages | All chat messages are cleared from the widget |
| Session ID | A new session identifier is generated |
| Thread ID | The conversation thread is reset for fresh context |
| Avatar State | Any ongoing speech is stopped |
| Input Field | Any typed text is cleared |
| Welcome Message | A fresh welcome message is displayed |
When to Use Reset
Encourage visitors to use reset when:- They want to ask about a completely different topic
- The conversation has gone off-track
- They want to see the suggested questions again
- They’re testing different queries
3D Avatar Panel
The avatar panel provides a visual companion for conversations. A 3D animated character responds to interactions, creating a more personal and engaging experience.Avatar Panel Layout
Desktop View:- The avatar panel appears alongside the chat area
- Both panels are visible simultaneously (800px total width)
- The avatar animates while speaking
- Toggle visibility with the bot icon in the header
- The avatar panel is not available on mobile
- Mobile users get the full chat experience without the avatar
- This optimizes performance and screen real estate
Avatar States
| State | Description |
|---|---|
| Idle | Avatar displays a neutral, ready state |
| Loading | Progress indicator shows while avatar assets load |
| Speaking | Avatar lip-syncs to audio with natural animations |
| Error | Fallback state if avatar fails to load |
Avatar Loading
The 3D avatar requires loading assets (GLB models, animations) when the chat opens:Avatar assets are only loaded when the chat widget is opened, not when the page loads. This prevents unnecessary bandwidth usage for visitors who don’t use the chat.
Controlling the Avatar Panel
Show/Hide Toggle:- Click the bot icon in the header to toggle the avatar panel
- When visible: Bot icon appears with a subtle highlight
- When hidden: BotOff icon indicates the panel is collapsed
- Closing the panel stops any ongoing audio
- Switching to language view also stops audio
- The panel state persists during the session
Feature Comparison by Device
Different features are available depending on the device:| Feature | Desktop | Mobile |
|---|---|---|
| Chat Interface | Yes | Yes |
| Avatar Panel | Yes | No |
| Audio/TTS | Yes (when panel open) | No |
| Language Switching | Side panel | Full-screen view |
| Reset Conversation | Yes | Yes |
| Close Button | In header | In header |
Best Practices
Audio Experience
Audio Experience
- Configure TTS voices that match your brand personality
- Set up language-specific voices for natural pronunciation
- Test audio in all enabled languages before deploying
Language Support
Language Support
- Only enable languages your knowledge base can support well
- Test AI responses in each enabled language
- Consider regional variations (e.g., Brazilian Portuguese vs. European Portuguese)
Avatar Usage
Avatar Usage
- Choose an avatar that represents your brand appropriately
- Consider the avatar’s appearance for your target audience
- Test avatar loading performance on slower connections
Mobile Optimization
Mobile Optimization
- Test the chat experience on various mobile devices
- Verify language switching works smoothly on touchscreens
- Ensure the close button is easily accessible