guys im using vapi in my react js website and i dont want the absolute call button to appear on the page since i've implemented my own button that starts a call, i've tried adding "customClass: 'vapi-button' " to the config as 'buttonConfig' and tried to customize it from the css and nothing changed! please help.

Hi there! 👋 I understand you're trying to hide the default Vapi call button since you've implemented your own button in your React JS website. While I couldn't find specific information about the

customClass: 'vapi-button'

property you tried, I can definitely help with some alternative approaches! Here are some ways you can hide or customize the default Vapi button: ### 1. Hide the button using CSS You can target the

.vapi-btn

class and set its display property to none:

css
.vapi-btn {
  display: none !important;
}

This CSS class is the primary class for the Vapi button according to the [Vapi documentation](https://docs.vapi.ai/examples/voice-widget). ### 2. Modify the button using buttonConfig The

buttonConfig

object allows you to customize various aspects of the button. Here's an example:

javascript
const buttonConfig = {
  position: "bottom-right", 
  offset: "40px",
  width: "50px", 
  height: "50px",
  idle: {
    color: `rgb(93, 254, 202)`,
    type: "pill",
    title: "Have a quick question?",
    subtitle: "Talk with our AI assistant",
    icon: `https://unpkg.com/[email protected]/icons/phone.svg`,
  },
  // Additional states: loading, active
};

According to the [Vapi documentation](https://docs.vapi.ai/examples/voice-widget), you can modify these properties to change the button's appearance and behavior. ### 3. Check for CSS conflicts If your CSS customizations aren't working, it might be due to CSS conflicts. Some users have reported that adjusting the z-index resolves issues:

css
.vapi-btn {
  z-index: 1000 !important;
}

This solution was mentioned in a [community discussion](https://discord.com/channels/1211482211119796234/1211483291191083018/threads/1329911977874555041) where a user had similar issues. ### 4. React JS Integration For React JS integration, make sure you're properly importing and initializing Vapi: ```javascript import Vapi from "@vapi-ai/web"; // Then in your component

the .vapi-btn{display: none !important} worked for me, thanks!!

Message marked as helpful by @𝙰𝚋𝚍𝚞𝚕𝚕𝚊𝚑! 🎉

checking if this is resolved/solved for you?

solved

Marking this ticket as Solved ✅