How it works
The client pastes two script tags on their website. The first sets the configuration (clientId, mode, styling options). The second loads the widget script. That's it — a floating chat icon appears and users can interact with the AI assistant.
- Floating chat icon with customizable color and position
- Slide-up chat panel with responsive sizing
- Optional auto-open on page load
- Fullscreen toggle for immersive experience
- Mobile-optimized with automatic fullscreen on small screens
- Custom panel dimensions via iframe config overrides
Embed code
Copy and paste this snippet into your website. Customize the clientId,
icon color, position, and behavior to match your brand.
Configuration Reference
All available ZendyConfig options for assistant mode:
| Option | Type | Description |
|---|---|---|
clientId | string | Required. Your client identifier. |
mode | "assistant" | Required. Set to "assistant" for floating chat. |
apiBaseUrl | string | Optional. Override the API base URL. |
iframeBaseUrl | string | Optional. Override the iframe base URL. |
assistant.position | string | Optional. "bottom-right" or "bottom-left" (default: "bottom-right"). |
assistant.iconColor | string | Optional. Hex color for the floating chat icon (default: "#3b82f6"). |
assistant.showOnLoad | false | "desktop" | "all" | Optional. Auto-open the chat panel on page load. "desktop" opens only on screens ≥ 768px. "all" opens on any device. (default: false). |
assistant.showFullscreenButton | boolean | Optional. Show fullscreen toggle inside the panel. |
iframe.maxWidth | number | string | Optional. Max width of the assistant panel. |
iframe.maxHeight | number | string | Optional. Max height of the assistant panel. |
Sample page content
This area represents the client's actual website content. The floating chat icon in the bottom-right corner is injected by the embed script above. Click it to open the Zendy AI assistant.