We are having an issue with the live chat on the bottom right not having a transparent background. Have looked all over at the code and CSS and can’t find any settings that would fix this. Any ideas?
Live chat example: https://streamdal.com/
We ended up resolving this internally.
Maybe you have a CSS dark-mode supported design and something like this in your styles:
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) body:not([data-theme]) {
(...)
color-scheme: dark;
}
}
Therefore, you need to specify the scheme for the HubSpot chat iframe to handle the bg-color properly:
#hubspot-messages-iframe-container iframe {
background-color: transparent !important;
color-scheme: light;
}
The problem is the “color-scheme: dark;” declaration. See MDN for more information: color-scheme CSS property - CSS | MDN