The embed widget automatically adapts its layout on mobile devices (viewport width under 768px). No configuration is needed — the responsive behavior is built in.
Tray on Mobile
On desktop, the tray opens a compact 583 × 800px panel. On mobile, it switches to a full-screen overlay for better usability on small screens.
| Desktop | Mobile |
|---|
| Trigger | Floating button (bottom-right) | Floating button (bottom-right) |
| Open state | Compact panel | Full-screen overlay |
| Close | Click outside or close button | Close button |
Full-screen on Mobile
No change — full-screen is already the same layout on both desktop and mobile.
Chatbar on Mobile
The chatbar adapts its layout while keeping the inline input bar:
| Desktop | Mobile |
|---|
| Input bar | Fixed at bottom center | Fixed at bottom center |
| Chat window | Floating window above input | Full-screen overlay with close handle |
| Close | Pill close button above window | Drag handle at top of overlay |
Detection
Mobile detection uses window.innerWidth < 768. This check runs when the widget is first created. If the user resizes the browser window after creation, the chatbar re-evaluates on open/close transitions.
The 768px breakpoint is not currently configurable. If you need different behavior at a specific breakpoint, you can conditionally set the type option based on your own viewport check before calling embedWidget().
