Customize HubSpot chat css

[GC5]

Hi,

How can i customize css style for my chat integrated with Javascript?

I need to change the style of my chat widget:

• Change button icon color that open the chat window, or i need to remove shadow on it, or add custom icon for button;

• Hide button  that open the chat window;

• Move the position of chat window on the screen;

• Add custom font for chat messages;

Is there a solution to these problems?

Thanks.

[LMeert · Accepted solution]

Hi @GC5,

I'll link you to another solution I provided for moving the chat window on the screen.

You can't customise what's inside an iframe as it's basically another webpage within your page so you won't be able to use a custom font. The only way to do that is to inject some code in the iframe but there's no way to do that with the chat window.

You can do the other things in your list though, some easily, others using tricks :

- color customisation => go to your inboxes settings and simply change the color using the prompt as shown below.

- custom open/close action :

This relies on a trick that pushes the container out of the screen when the chat is closed.

   #hubspot-messages-iframe-container {
      bottom: -80px;
   }

Adjust that for mobile using a media query.

You will have to replace that with your own button, that you will have to tie to a bit of javascript that will open and close the chat like using :

HubSpotConversations.widget.close();

or

HubSpotConversations.widget.open();

You will also have to add a media query to remove the bottom: -80px on mobile since the chat takes 100% of the screen height.

As you can see there are solutions to most of your problems, although they're not clean solutions, you'll have to get a bit creative to find a workaround, but what's written above is indeed working.

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

Best,

Ludwig

[Hidealoo]

Hi, the CSS solution will not work:

   #hubspot-messages-iframe-container {
      bottom: -80px;
   }

As part of the inline HubSpot CSS, 'bottom' has the '!important' rule added to the value, therefore, can't be overwritten by local CSS declarations.

Many thanks, and hope it's sorted soon, as it's a problem when dealing with footers.

[GC5]

Hello, thank you for the help! I need to move the position of chat window on the screen, to connect it to the click event of my custom button on page. Therefore I don't want it to be fixed at the bottom left or bottom right. I managed to simulate the behavior by modifying the style code of the chat, but I cannot implement it as it is enclosed in an iframe tag

As for your suggestions, doing workarounds is not the best way to solve problems, because I hope that in the future there will be the possibility to customize the widget. 😉

[LMeert]

Indeed @GC5, that's why they're callked workarounds 😉
For the moment though, unless you use them, you'll have to postpone your plans.

In the meantime, I encourage you to check if such an idea has been posted in the appropriate section of this forum and upvote it. Otherwise, feel free to post your own so as to inform HubSpot that there's a specific need for chat customisation.

Best regards,

Ludwig 

[GC5]

Alright i understand, before closing this thread, i was just wondering if there was a way to move the chat window separately from the open button. otherwise everything is fine thanks.

[TitiCuisset]

Hi @GC5 

Thank you for reaching out.

I want to tag some of our experts here - @Anton @LMeert do you have some suggestions for @GC5 on this? 

Thank you!

Best

Tiphaine