Web widget
Overview
Add a complete AI chat and voice interface to your website with a single line of code. The Vapi Web Widget provides a customizable, floating chat interface that supports both text chat and voice conversations.
What You’ll Build:
- Embeddable chat widget with voice and text capabilities
- Customizable themes, colors, and positioning
- Real-time conversations with context management
- Cross-platform compatibility with minimal setup
Widget Features:
- Voice Mode - Full voice conversations with transcription
- Chat Mode - Text-based conversations like ChatGPT
- Custom Styling - Match your website’s design
View the complete source code and examples on GitHub.
Prerequisites
- A Vapi account with a public API key
- An existing assistant or willingness to create one
- A website where you want to embed the widget
Scenario
We’ll add a customer support widget to “TechFlow’s” website that allows visitors to get help through both voice and text conversations.
1. Get Your Public API Key
2. Install the Widget
CDN Script
React Component
Add the widget script to your HTML page:
3. Configure Widget Modes
4. Customize Appearance
5. Handle Events and Callbacks
6. Advanced Configuration
7. Production Considerations
Configuration Reference
Required Props
Assistant Configuration
You must provide either assistant-id
, assistant
, or both assistant-id
and assistant-overrides
. The assistant
prop is only supported in voice mode.
Appearance Options
Styling Options
Text Customization
Advanced Options
Browser Support
- Chrome/Edge 79+
- Firefox 86+
- Safari 14.1+
- Mobile browsers with WebRTC support
Requirements
- Microphone access for voice mode
- HTTPS required in production
- Vapi account and API key
Next Steps
Enhance your widget integration:
- Chat API - Build custom chat interfaces using the API directly
- Voice calls - Add programmatic voice calling capabilities
- Custom tools - Give your assistant access to external APIs
- Assistant customization - Fine-tune your assistant’s behavior
The widget automatically handles microphone permissions, audio processing, and cross-browser compatibility. For custom implementations, consider using the Web SDK directly.