I just added the Vapi chatbot widget to my website. For some reason I cannot get the buttons to display as intended. I already messed around the the colors and tried different color schemes. Nothing seems to work. Has anyone else has this issue? My website was built using Elementor and hosted on Wordpress. https://cdn.discordapp.com/attachments/1415676642377859213/1415676642810007562/IMG_2445.png?ex=68c4131d&is=68c2c19d&hm=edab536b6a9994e5e49f1fa57df3c2d8d977ae291471d8a7a3e280d7d315a060&

Hi bud4wie2ser0, It seems like the issue you're experiencing with the buttons on the Vapi chatbot widget not displaying correctly could be related to CSS conflicts on your website, especially since it's built with Elementor and hosted on WordPress. Here's what you can try to resolve the issue: 1. **Inspect CSS Conflicts**: Use the browser's developer tools to inspect the button elements. Right-click on a button, select "Inspect," and check if there are CSS styles (from Elementor or your WordPress theme) that are overriding the widget's default styling. 2. **Custom Styling**: You can explicitly set the button styles within your

vapi-widget

tag to ensure they have the correct appearance. You can set properties like

button-base-color

and

button-accent-color

to define the background and text/icon color for the widget buttons.

html
   <vapi-widget
     public-key="your-public-key"
     assistant-id="your-assistant-id"
     mode="chat"
     theme="light"
     button-base-color="#FFD700"    <!-- Set to your desired button color -->
     button-accent-color="#000000"  <!-- Set to your desired text/icon color -->
   ></vapi-widget>

3. **Theme Conflict Resolution**: If the conflict comes from your Elementor stylesheet, consider adding custom CSS rules in your theme's custom CSS settings to override these styles for the Vapi widget specifically. 4. **Alternative Testing**: Test applying different themes or baseline styles to see if the problem lies with the current styling configuration being overridden. Make sure to clear any caching systems you have in place after making changes to ensure that they take effect. If these steps don't solve the issue, you might need to dig deeper into the Elementor settings or custom CSS that's globally applied on your website.

Hello all, Develop a plugin for the VAPI user: https://github.com/imranhoshain/voice-ai-agent-for-vapi You can use it from here.

please let us know and we’ll be happy to step in and assist further.