I’m creating a chat widget that’s powered by an LLM backend service.
The issue I’m facing is that after I minimize the widget, I’m no longer able to drag or pan the map. It seems like the original widget area (set in Experience Builder) is still taking up space — minimizing it in React doesn’t actually make that area transparent or release the pointer events.
I’ve tried several approaches but haven’t had any luck so far. Has anyone run into a similar issue, and if so, how did you solve it?
Thanks in advance!
Thanks in advance
This happens because the minimized chat widget still sits on top of the map.
Just set the container to ignore pointer events when minimized:
.minimized {
pointer-events: none;
width: 0;
height: 0;
opacity: 0;
}
Or hide it completely with display: none.
In Experience Builder, you can also dispatch:
appActions.widgetStatePropChange(widgetId, 'visible', false)
That frees up the map for panning again.