Resizing Height of Chat Window

[AByrne6]

Does anyone have any css that they've used on their wordpress website to resize the iframe of the chat window?

Right now, the chat is very tall and when open, bleeds behind the top menu of our website. Id like to scale it down but every time I try and add css, it just shrinks the full chat window versus scaling it down so everything still shows. 

Any ideas of things that have worked?

[danmoyle · Accepted solution]

Hey there @AByrne6. In some research (as I no longer work in Wordpress sites but only HubSpot), I found that resizing the height of the HubSpot chat window iframe on a WordPress site, direct CSS applied to the iframe often won't work due to cross-origin restrictions—so targeting the iframe's size or content with standard CSS or JavaScript is usually blocked. HubSpot chat is rendered in an iframe served from HubSpot’s domain, so you cannot directly style its contents from your WordPress site. Any CSS added in WordPress will typically affect only the outer iframe container, not the chat form inside it, which causes shrinking/cropping of the chat interface rather than scaling it responsively.

Have you checked in the HubSpot chat settings? I found this Ideas post where one HubSpot user found a similar issue, and some users have found options within HubSpot’s chat widget settings to control popup or widget dimensions, but as of now, no fine-grained height controls are officially available, only some general sizing and customization.

You can try wrapping the chat embed with a container div and adjusting its z-index or max-height in your theme’s CSS. However, this still won’t fix internal overflow and may cause interface cropping. "z-index Adjustment" : If the chat window is overlapping the menu, increasing the z-index of your site’s top menu (e.g. .main-menu { z-index: 9999; }) will keep the menu on top without shrinking the chat itself.

Here's what I found for an example of the z-index solution:

.main-header, .site-header, .top-menu {
    z-index: 9999;
    position: relative;
}

I hope that helps! 

[AByrne6]

I think right now the chat is going behind the menu, and that feels worse then it going in front, because some of the chat is just cut off then. But maybe both options are not perfect solutions. I swear when I open the chat on HubSpot's website, it seems shorter then the one I have so I'm curious how they are making it work. 

[Victor_Becerra]

Hi @AByrne6,

Just checking back in—were you able to get this issue sorted out with the chat window height? If not, could you clarify what the current behavior looks like after trying the suggestions here? That’ll help us know whether we need to dig deeper or explore additional approaches.

Best,
Victor

[himanshurauthan]

Hey @AByrne6 

Could you share a link to a page where the chat is visible? I can then suggest CSS fixes. 

Regards, 

Himanshu

[AByrne6]

Here is the website: https://www.questce.com/

[Victor_Becerra]

Hi @AByrne6 
Thank you for reaching out to the Community!
I'd like to invite some community members who are subject matter experts to join this conversation.
@Crystal_Hopper @danmoyle @SNigam - Would you be able to share any insights on this? Your expertise would be greatly appreciated.
Best,
Victor