Styling embedded chat widget

[cargoplot]

Hi community,

We followed the guide on Accounts Dashboard | HubSpot to embed the Hubspot chat widget into our website, and it looks really neat as you can see from the screenshot.

We would like to style it a bit more (e.g. change the blue color of the top bar to green to make it match the other panels), but are wondering if this is possible at all. Since the chat window is loaded in an iframe, it does not share the DOM with our main web application so stylesheets don’t apply to it.

One possibility would be to access all elements using JS (if possible at all due to the iframe) and then change the styling with that, but it feels quite hacky.

Has anyone else encountered this challenge before and succesfully solved it? We would love to hear how

[Teun]

Hi @cargoplot ,

You can actually change the colors of the chat widget through the HubSpot portal settings.

Try navigating to Settings > Inbox > Inboxes and in the overview, click on the ‘Edit’ button of the chat:

You should be able to edit the accent colors on the next screen:

IFrame styling is indeed quite hacky, so I hope this helps.

[cargoplot]

Hi Teun,

Thanks for this. Can I apply a different style per chat flow? Or is only one style possible?

Daniel