When I include the chat widget on my site the widget CSS is affecting my site layout, and my site css is affecting the chat. Is there a way to force it to be isolated/shadow dom? I have not had this issue with the other chat widgets I have used

any updates on this?

Hi Admiral Dopey, To prevent CSS from your site affecting the widget and vice versa, you can use the Shadow DOM approach for encapsulation. Unfortunately, the Vapi Web Widget doesn't support enabling Shadow DOM directly. As an alternative, you might consider using [custom CSS classes](https://docs.vapi.ai/chat/web-widget) to more specifically target elements either in your site or the widget. Adjust your site CSS selectors to be more specific or use the

!important

directive where necessary to prevent unwanted style changes. For further customization, refer to the [Web widget documentation](https://docs.vapi.ai/chat/web-widget).

so i would need to go through every page on my site and find all of the things that might be broken by including the widget? then write css overrides for those? im not having this issue with any other plugins/services i am using

Yes, you will need to write the css override for those.

thank you for asking this question, i am facing the same issue, i don't have much control over site its maintained through CMS, i could only control what goes inside . I am not sure @Sahil App if I understood your suggestion, could you please help what exactly i need to do to make sure website css doesn't impact the vapi widget or i can add some more custom js? @Admiral Dopey did you find any solution to it?

We ended up having to put the widget in an iframe that resizes when the chat is opened. It's not ideal The widget needs to use a shadow dom, I believe that's what most other plugins do as well but would be something vapi has to add

@Admiral Dopey how are you detecting that the chat UI is opened? (and closed) .. not specifically that the conversation started/ended . thanks

im not, we put the widget in an iframe and use to auto resize it

Any updates on this? @User