Chat Widget appearence confilct
# support
l
The provided script for the Chat feature correctly inserts a widget inside the website but it is not isolated from the host styling, thus getting weird. Is there a way to isolate it?
v
Thank you for your question! To help you further, could you please specify which parts of the chat widget's appearance are being affected by your website's styles (e.g., fonts, colors, layout), or share a brief example of the conflicting CSS? This will help me suggest the best way to isolate or customize the widget for your use case. Source: - [Vapi Chat Widget Documentation](https://docs.vapi.ai/chat/web-widget)
l
The size and the font
c
Hi LC555, To get started with integrating the Vapi Web Widget on your website, you can follow these steps: 1. Get Your Public API Key - Go to [the Vapi dashboard](https://dashboard.vapi.ai), log in, and navigate to your profile. Under
Vapi 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:
Copy code
html
     <script src="YOUR_WIDGET_SCRIPT_URL"></script>
- If you're using React, install the package:
Copy code
bash
     npm install @vapi-ai/client-sdk-react
3. Configure Widget Modes - For text-based chat:
Copy code
html
     <vapi-widget public-key="your-public-key" assistant-id="your-assistant-id" mode="chat"></vapi-widget>
- For voice interaction:
Copy code
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:
Copy code
html
     <vapi-widget theme="light" position="bottom-right" size="compact"></vapi-widget>
5. Handle Events - Listen and respond to widget events in your app:
Copy code
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.
5 Views