Manually resizing Chatflow bubbles causes them to be cut off at the top of the screen, making the hidden area inaccessible

Develop, Build & Integrate
1

We use Chatflow for customer support.

By default, the Chatflow chat bubble resizes in response to changes in browser window size. However, once the bubble has been manually resized, its size no longer adjusts when the browser window is resized.

While I understand this behavior is intentional, we have run into an issue where the top of the bubble gets cut off on the screen. When this happens, there is no way to access the hidden portion, making certain actions impossible.

I have two questions regarding this:

  1. Is there a way to resolve the issue of the bubble being cut off and inaccessible? We can temporarily work around it by zooming out the browser, but it is difficult to ask customers to zoom out their browser every time they use Chatflow. Similarly, asking them to run window.HubSpotConversations.resetAndReloadWidget() from the developer tools is also impractical.
  2. Are there any plans to add a feature that automatically adjusts the height of a resized bubble if it gets cut off at the top of the screen?

I believe this is a very rare case, but we have received a report of this issue from one of our customers.

Thank you in advance for your assistance.

2

Hey @nanamin,

Welcome to the Community! :tada:

The resize behavior you’re describing does seem like it could create a frustrating dead-end for end users. A few resources that may be relevant while you wait for community input:

Also tagging in some folks from our community to see if they have any tips and tricks on this!

Hey @Alex_Boissonneault, @SteveHTM, @michaelma – Do you have any suggestions for @nanamin on this?

Thank in advance!!

Sam, Community Manager

3

Hey @stassey thanks for looping me in! Happy to help.

@nanamin, you’ve diagnosed it correctly: once a visitor manually resizes the bubble, HubSpot stores those dimensions in their browser and stops auto-fitting to the window, so on a smaller screen the top can end up above the viewport with no handle to grab.

Since asking customers to open dev tools (or zoom) isn’t realistic, the practical move is to automate that resetAndReloadWidget() call for them. Drop a small snippet on the pages where the widget loads that watches for the “clipped at the top” state and quietly resets it:

js

window.hsConversationsOnReady = [function () {
  const fixIfClipped = () => {
    const iframe = document.querySelector('#hubspot-messages-iframe-container iframe');
    if (iframe && iframe.getBoundingClientRect().top < 0) {
      window.HubSpotConversations.resetAndReloadWidget();
    }
  };
  window.addEventListener('resize', fixIfClipped);
  fixIfClipped();
}];

So the reset fires silently on load and on resize only when the bubble would otherwise be cut off, no zooming, no console. I’d test on a staging page first, as the exact container selector can vary slightly by portal.

On your second question: a few of us here are community members rather than HubSpot staff, so I can’t speak to the roadmap, but this is a great one for the HubSpot Ideas board so Product can see it and others can upvote. Happy to help you word it up if that’s useful.

Hope that gets your customer unstuck!

4

@stassey @Alex_Boissonneault

Thank you for the help!

I’ll set up a resize listener so I can resize from my application.

I’ll also try posting to the idea board!