data-mode="side-panel" to dock the chat panel
on the right edge instead of showing a floating popup. The panel pushes the
page content to make room. Use the tab handle on the right edge to toggle.
Scroll down to test that page content remains scrollable while the side panel is open. The panel should push this content to the left.
A mock product grid to verify the body margin push and scrolling behavior.
We are a fictional demo store used to test the HEA side-panel embed mode. This section adds vertical height so you can verify scrolling behavior with the panel open.
The side panel should dock on the right side of the viewport, push the body content to the left by 400px (the default panel width), and remain visible as you scroll. The panel uses position: fixed so it stays in place while the page scrolls underneath.
Key behaviors to verify:
data-panel-collapsed="true")"The side panel is so convenient — I can browse and chat at the same time!"
"Love how the panel pushes the page instead of covering it. Much better UX."
"Works great on my ultrawide monitor. The tab handle is intuitive."
"Smooth animation when opening and closing. Very polished experience."
Configure the side panel via data-* attributes on the embed script tag.
| Parameter | Default | Description |
|---|---|---|
data-hea-id | — | Your HEA chatbot identifier (required) |
data-creator-id | — | Your workspace / org identifier (required) |
data-mode | popup | Set to side-panel to dock the panel |
data-panel-side | right | Which edge to dock: right or left |
data-panel-width | 400px | Panel width — any CSS value, e.g. min(400px, calc(100vw - 48px)) |
data-panel-collapsed | false | Start collapsed (tab only) instead of auto-open |
data-panel-tab-top | 70% | Vertical position of the tab handle |
data-widget-url | CDN | Override the widget HTML URL (for self-hosting or dev) |
This section exists purely to add more vertical height for scroll testing. In a real deployment, this would be your actual page content — product details, blog posts, documentation, etc.
The side panel should remain docked and visible as you scroll through all of this content. The tab handle should track at top: 50% of the viewport.
↓ Keep scrolling ↓
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.