APIs & Integrations

AldenZuck
Member

Move Hubspot Widget slightly to the right with CSS?

I am having this problem with trying to move the hubspot widget 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;
}

 

@LMeert

0 Upvotes
7 Replies 7
amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Move Hubspot Widget slightly to the right with CSS?

@AldenZuck Your "yourNewClass" class isn't being applied to the iFrame because the code is running before the chat iFrame has been loaded in. Either wrap the code in a window load function so it runs after the element has rendered (which may cause some jumping):

window.addEventListener('load', (e) => {
  document.getElementById('hubspot-messages-iframe-container').className += "yourNewClass";
});

 

or just remove the custom class from your CSS

 

#hubspot-messages-iframe-container {
  left : 40px !important;
}

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


AldenZuck
Member

Move Hubspot Widget slightly to the right with CSS?

Screen Shot 2022-08-15 at 9.40.12 AM.pngStill no luck @amwilie I have to create a custom class because the original css has !important in the code already for the placement.

 

 

 

 

0 Upvotes
amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

Move Hubspot Widget slightly to the right with CSS?

@AldenZuck Only just now realizing your code was using className += with this the class of the element was becoming "widget-align-leftyourNewClass" with no space between the classes, so it wasn't being seen as it's own class. Try switching to using .classList.add("yourNewClass"), this will make it it's own class.

 

window.addEventListener('load', (e) => {
  document.getElementById('hubspot-messages-iframe-container').classList.add("yourNewClass");
});

 

If this answer solved your question, please mark it as the solution!

border

Alyssa Wilie

Web Developer at LyntonWeb

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton


jpineda91
Contributor

Move Hubspot Widget slightly to the right with CSS?

@AldenZuck 
How does it look if you inspect the page? I think the issue is that you are not actually selecting the correct element. Example:

Screen Shot 2022-08-12.png


AldenZuck
Member

Move Hubspot Widget slightly to the right with CSS?

Not sure if this is what you are looking for @jpineda91 

Screen Shot 2022-08-12 at 1.06.47 PM.png

0 Upvotes
jpineda91
Contributor

Move Hubspot Widget slightly to the right with CSS?

Hi @AldenZuck 

You can try

#hubspot-messages-iframe-container.widget-align-left.yourNewClass {
   margin-left: 40px !important;
}
0 Upvotes
AldenZuck
Member

Move Hubspot Widget slightly to the right with CSS?

Thanks for the response! Unfortunately it didn't work:

Screen Shot 2022-08-12 at 12.34.09 PM.png

 

0 Upvotes