1 Launcher (collapsed)

Default page state
Hero banner
1
Position from WidgetPosition (default bottom-right). Color from PrimaryColor. The unread badge shows when the bot has proactively pinged the user (v1.1).

2 Open — welcome + first turn

User just clicked launcher
Hero banner
Store Assistant
Online · typically responds in a few seconds
Hi! How can I help you today?
📦 Track my order
🚚 Shipping info
🔄 Returns
💳 Payment
Do you ship to Brazil?
Powered by AI Chat Bot · Your messages aren't shared with other customers
Welcome bubble = WelcomeMessage. Quick-reply chips are derived from top FAQ topics indexed in the KB (v1.1 — static fallback for v1.0). Typing indicator shows while SSE stream from /AiChatBot/Send is opening.

3 Streaming reply + sources

Mid-conversation, response in progress
Product page
Store Assistant
Online
Show me the cheapest gaming mouse you have.
Our most affordable gaming mouse is the RedDragon M601 at $19.99. It's a wired ergonomic mouse with 3,200 DPI and 6 programmable buttons — currently rated 4.5★ by 218 customers.
RedDragon M601 Gaming Mouse
$19.99
View product
Source: products/reddragon-m601 · category/gaming-peripherals
Cool — does it work on Mac?
Yes — the M601 is plug-and-play on macOS via USB-A. There's no companion config app for Mac so DPI is fixed at 3,200, but the
Powered by AI Chat Bot · Answers based on store content
Product chip rendered when the bot's KB hits include a product chunk — the chunk metadata exposes URL + image. Sources footnote lists the top KB chunks used to compose the reply. Thumbs-up/down feed the Helpful answers KPI (v1.1).
Mobile viewport — 375 × 812 px
Under 600 px, the chat panel becomes full-screen. Launcher stays fixed with safe-area inset.

4 Mobile — launcher

375 px viewport
9:41
Launcher: 52 × 52 px (slightly smaller than desktop 58px) with 16 px safe-area inset from bottom and right. Anchored to WidgetPosition setting.

5 Mobile — full-screen chat

Chat open on 375 px, takes over viewport
9:41
Store Assistant
Online
Hi! How can I help you today?
📦 Track order 🚚 Shipping 🔄 Returns
What gaming mice do you have under $30?
Our best pick under $30 is the RedDragon M601 at $19.99 — 3,200 DPI with 6 programmable buttons. Rated 4.5★ by 218 customers.
RedDragon M601
$19.99
View product →
Source: products/reddragon-m601
Helpful?
Powered by AI Chat Bot
Under 600 px, the chat panel becomes full-screen (no margin, no border-radius). The close button (✕) replaces the minimize (—). Product chips and quick replies compact to fit narrow width. The header blends with the status bar. Safe area padding from env(safe-area-inset-bottom) on the input bar.

Annotations — storefront widget