Unwanted background behind chat widget

Hi

There is an unwanted background behind the chat widget on our website. It is light grey, please see the attached screenshot, where I have highlighted it with a red border:

I have added this CSS I found:

.shadow-container {

visibility: hidden !important;

}

But that doesn’t seem to have worked.

You can view the site here to see the issue:

Any idea how to remove that please?

Hi @madesimplemedia

Thank you for the link and the details - I can see that as well

I want to tag some of our experts here - @LMeert @Teun do you see what can be happening here?

Thank you!

Best

Tiphaine

Hi @madesimplemedia, (hello @TitiCuisset),

Your problem is the color-scheme property on the root of your document.

An easy fix (while leaving the rest of the website untouched) is to add {color-scheme: light;} to the div containing the chat iframe.

This will do :

#hubspot-messages-iframe-container {
 color-scheme : light;
}

Hope this helps !
If it does, please consider marking this answer as a solution :slightly_smiling_face:

Best,

Ludwig

Thanks Ludwig that was it! Really appreciate your help.

Thank you for posting this!!! I had the same problem - it was driving me crazy…

Additionally, you need to add this rule to hide any shadow container that might be contributing to the issue.