My VAPI chat widget for my website, when opened on mobile, is too big for the screen (see attached photo). Do you know how to make it responsive to formatting on mobile? https://cdn.discordapp.com/attachments/1425479864894361670/1425479865125306451/IMG_4245.jpg?ex=68e7bd13&is=68e66b93&hm=298daa813d7c6bfdd50e4b68da55c7fa1eb2367e56e1b87ce2c918dfad172ac1&

Hi Benny B, To set up the Vapi Web Widget on your site, follow these steps: 1. **Get Your Public API Key**: - Visit [dashboard.vapi.ai](https://dashboard.vapi.ai) and retrieve your public API key. - Also, copy the assistant ID you want to use. 2. **Install the Widget**: - Add the widget script to your HTML page:

html
     <script src="https://cdn.vapi.ai/widget.js"></script>

- If you're using React, install the package:

bash
     npm install @vapi-ai/client-sdk-react

Then include the component:

tsx
     import { VapiWidget } from '@vapi-ai/client-sdk-react';
     
     function App() {
       return <VapiWidget public-key="YOUR_PUBLIC_API_KEY" assistant-id="YOUR_ASSISTANT_ID" />;
     }

3. **Configure Modes**: - For voice mode:

html
     <vapi-widget mode="voice"></vapi-widget>

- For chat mode:

html
     <vapi-widget mode="chat"></vapi-widget>

4. **Customize Appearance**: - Adjust styles directly in the widget configuration:

html
     <vapi-widget theme="dark" position="bottom-right" />

To find more details, refer to the [Web Widget Documentation](https://docs.vapi.ai/chat/web-widget). If you encounter styling conflicts, ensure your site's CSS does not override the widget's styles, or use the

!important

rule selectively within your CSS.