I need help with modifying the visual styling of an ElevenLabs conversation widget. Right now I’m rendering the component in my React app like this:
const VoiceAssistant = ({ botId }: { botId: string }) => {
return <elevenlabs-convai agent-id={botId}></elevenlabs-convai>;
};
The widget gets its default styling from their external JavaScript file that loads asynchronously. I want to change things like the colors, shape, positioning and other visual properties but I’m not sure how to override their built-in styles.
What’s the best approach to customize the appearance? Can I use regular CSS to override their styles or do I need to use some specific method? Any examples would be really helpful.
I’ve encountered the same challenge with ElevenLabs widgets. Their external styles are quite tricky to override, but it can be achieved.
Start by using the developer tools to inspect the widget and identify the specific class names used. Craft your CSS with higher specificity, or use !important on properties if necessary. Timing is also crucial; ensure your styles are loaded after the widget’s JavaScript has finished loading. One effective approach is to wrap the widget in a container div, styling both the container and the widget elements. This method typically yields better results than targeting the widget alone. Just be patient and wait for the async loading to finish before applying your custom styles.