APIs & Integrations

LBreda
Member

How to move the livechat widget in another position?

SOLVE

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?

1 Accepted solution
LMeert
Solution
Guide | Platinum Partner
Guide | Platinum Partner

How to move the livechat widget in another position?

SOLVE

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

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

View solution in original post

4 Replies 4
LMeert
Guide | Platinum Partner
Guide | Platinum Partner

How to move the livechat widget in another position?

SOLVE

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 🙂

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

0 Upvotes
LBreda
Member

How to move the livechat widget in another position?

SOLVE

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

0 Upvotes
LMeert
Solution
Guide | Platinum Partner
Guide | Platinum Partner

How to move the livechat widget in another position?

SOLVE

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

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

AldenZuck
Member

How to move the livechat widget in another position?

SOLVE

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:

<!-- Start of HubSpot Embed Code -->
<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";

 

<!-- End of HubSpot Embed Code -->

 

CSS Box:

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