topic Re: How to move the livechat widget in another position? in APIs & Integrations

How to move the livechat widget in another position?

LBreda — Wed, 04 May 2022 08:20:38 GMT

Hi,

We are restyling our company site and we use the livechat widget.

In the restyled version we want to use another widget where potential customer can call, write an e-mail or use the live chat.

The problem is we can't find a way to put the livechat widget inside this new widget. The only options i could find for moving the chat are to display it on the right or on the left of the page.

Is it possible to move the widget where we like? How?

Re: How to move the livechat widget in another position?

LMeert — Wed, 04 May 2022 09:18:45 GMT

Hi @LBreda,

As you saw, Hubspot only gives you the possibility to put the chat left or right, so out of the box there's no way to have it somewhere else.

The best solution to your problem is still to adjust your design to work with the chat default layout but if you really need to do it, this little "hacky" solution will do using a little bit of javascript and CSS :

The embed of the chat window has styling included and all the css properties defining where the livechat will be placed have the "!important" modifier.
The only way to override it is to add a class to the div containing the iframe and then use a higher specificity css selector to style it your way.

This would work to add a new class :

document.getElementById('hubspot-messages-iframe-container').className += " yourNewClass";

Then you could move the chat by overriding the default positionning with CSS :

#hubspot-messages-iframe-container.widget-align-right.yourNewClass { right : newValue !important; bottom : newValue !important; }

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

Re: How to move the livechat widget in another position?

LBreda — Wed, 04 May 2022 09:20:45 GMT

Ok perfect i'll try and tell you if it works, thanks!

Re: How to move the livechat widget in another position?

LMeert — Wed, 04 May 2022 14:21:53 GMT

No problem, I tried it this morning before answering you so that should be ok 🙂

Re: How to move the livechat widget in another position?

AldenZuck — Fri, 12 Aug 2022 16:16:51 GMT

Hey @LMeert. I am also having this problem but unable to make this work. The widget aligns left and I am trying to move the widget button slightly to the right. This is what I have: (This is within the CRM system GoHighLevel)

Javascript Box:


<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/19959963.js"></script>

document.getElementById('hubspot-messages-iframe-container').className += "yourNewClass";

CSS Box:

#hubspot-messages-iframe-container.widget-align-left.yourNewClass {
left : 40px !important;
}