# Styling embedded chat widget

**URL:** <https://community.hubspot.com/t/styling-embedded-chat-widget/55926>\
**Category:** APIs & Integrations\
**Tags:** developer-tools, professional\
**Created:** [April 29, 2022, 8:11am UTC](https://community.hubspot.com/t/styling-embedded-chat-widget/55926 "2022-04-29T08:11:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cargoplot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cargoplot/32/191693_2.png) [@cargoplot](https://community.hubspot.com/u/cargoplot)\
**Post date:** [April 29, 2022, 8:11am UTC](https://community.hubspot.com/t/styling-embedded-chat-widget/55926/1 "2022-04-29T08:11:33Z")

</div>

![cargoplot_0-1651219574122.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/c/7c6a1122fe59663161491076dcace8b8d750e84c.png)

Hi community,

We followed the guide on [Accounts Dashboard | HubSpot](https://developers.hubspot.com/docs/api/conversation/chat-widget-sdk) 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 🙂

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [April 29, 2022, 6:12pm UTC](https://community.hubspot.com/t/styling-embedded-chat-widget/55926/2 "2022-04-29T18:12:36Z")

</div>

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:

 ![Schermafbeelding 2022-04-29 om 20.07.43.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/6/5648b248cddc2ada0892240f72fc17cd5d6e2454.png)

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

 ![Schermafbeelding 2022-04-29 om 20.05.48.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/545bdd51817b935eec22acace52a50aa70a41be0.png)

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

---

<div class="post-metadata">

**Author:** ![cargoplot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cargoplot/32/191693_2.png) [@cargoplot](https://community.hubspot.com/u/cargoplot)\
**Post date:** [May 5, 2022, 7:41am UTC](https://community.hubspot.com/t/styling-embedded-chat-widget/55926/3 "2022-05-05T07:41:30Z")

</div>

Hi Teun,

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

Daniel