Tests that the minimize button inside the chat iframe sends a hea-collapse postMessage to the host, which then collapses the entire side panel.
When the user clicks the minimize (—) button inside the widget iframe:
On re-expand via the tab handle, the conversation inside the iframe should still be present — no reload should occur.
When the panel collapses, margin-right on <body> should return to 0. When re-opened, it should be restored to the panel width.
No. The iframe remains in the DOM but is hidden via CSS. The conversation state persists across collapse/expand cycles.
The minimize button posts { type: 'hea-collapse' } via window.parent.postMessage(). The embed script listens for this and collapses the panel.
Yes. After collapse, the tab handle arrow should point left (◀) indicating "click to expand." When open, it should show the close indicator.
Yes. Pressing Escape while the panel is open should trigger the same collapse behavior. Focus should return to the tab handle.
The side panel is implemented as a position: fixed container on the right edge of the viewport. It contains an iframe that loads the widget HTML. Communication between the iframe and the host page happens via postMessage.
The embed script manages all host-side behavior: margin push, tab handle rendering, keyboard shortcuts, and message routing. The widget inside the iframe is unaware of the host page structure.
↓ Keep scrolling ↓
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel.
Pellentesque in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.