LC555
09/26/2025, 8:40 AMVapi Support Bot
09/26/2025, 8:41 AMLC555
10/10/2025, 3:47 PMChiranjeet Mishra
10/16/2025, 9:38 AMVapi API Keys, copy your Public API Key. Ensure you've selected the assistant ID you want to use.
2. Install the Widget
- Add the widget to your site by inserting the script in your HTML:
html
<script src="YOUR_WIDGET_SCRIPT_URL"></script>
- If you're using React, install the package:
bash
npm install @vapi-ai/client-sdk-react
3. Configure Widget Modes
- For text-based chat:
html
<vapi-widget public-key="your-public-key" assistant-id="your-assistant-id" mode="chat"></vapi-widget>
- For voice interaction:
html
<vapi-widget public-key="your-public-key" assistant-id="your-assistant-id" mode="voice"></vapi-widget>
4. Customize Appearance
- Match the widget to your site's design by customizing styling and positioning options:
html
<vapi-widget theme="light" position="bottom-right" size="compact"></vapi-widget>
5. Handle Events
- Listen and respond to widget events in your app:
tsx
<vapi-widget on-call-start={handleCallStart} on-call-end={handleCallEnd}></vapi-widget>
For further details, see the [Web Widget documentation](https://docs.vapi.ai/chat/web-widget).
If you need more customization, there are advanced options available, including session management and custom voice configurations.
Feel free to adjust these snippets according to your specific needs.