Betreff: Live Chat Background Transparency Issue

[dsilber]

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/

[dsilber · Accepted solution]

We ended up resolving this internally.

[mii · Accepted solution]

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: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme

[dsilber · Accepted solution]

We ended up resolving this internally.

[DianaGomez]

Hi @dsilber, thanks for letting us know 😊

Best,

Diana