Customize your AI chat widget to match your brand

The widget designer is a live-preview editor under Widget Designer in the dashboard sidebar. Every change you make previews instantly; nothing reaches your storefront until you click Save. The core designer is available on every plan. Starter theme presets, per-page themes, scheduled themes, and the theme A/B test are premium themes, included from the Growth plan up.

The designer tabs

Presets - starter themes to begin from (premium themes, Growth and above).
Brand - agent name, header logo, header style, and the color tokens (primary, accent, surfaces, text and more). You can extract colors from a logo image or generate a full palette from your primary color.
Layout - position, width, height, corner and bubble radius, offsets, shadow, and spacing density (compact, comfortable, or airy).
Launcher - shape, size, an optional inline label, a custom icon URL, the online dot, and the pulse animation.
Typography - a font from the built-in list, base size, heading and body weight, and letter spacing.
Motion - panel open effect, message entrance, and typing indicator.
Copy - override the shopper-facing text, such as the welcome message and input placeholder. See Languages for how the widget chooses a locale.
Targeting - per-page, scheduled, and A/B themes (below).
Advanced - custom CSS that affects only the rendered widget.

Smart Offer popup

The Smart offer popup section of the designer’s behavior form drives a proactive offer card that renders on the store page itself - outside the chat window, just above the launcher - before the shopper has opened chat. Clicking the card opens the chat with the offer as context, so the AI immediately walks the shopper through the details (and shows the discount code, if the offer carries one). Dismissing it hides the popup on that browser for a cooldown window you control, so it never nags.

Trigger - when the popup appears:
- Time on page - after the configured delay on an eligible page. The default nudge for most stores.
- Exit intent - when the cursor leaves toward the top of the viewport (about to close the tab or switch away). Use it as a last-chance save rather than a first touch.
- Cart idle - after the configured seconds with no mouse, keyboard, or scroll activity, and only when the shopper is on the cart page or has items in the cart. Aimed at hesitation at the point of highest intent.
Display scope - which pages are eligible: product pages only, cart only, product + cart (the default), or all pages.
Delay / idle seconds - 3–90 seconds (default 12). Serves as the wait for time-on-page and as the inactivity window for cart idle.
Dismiss cooldown - 1–168 hours (default 24). After a dismiss, the popup stays hidden on that browser for the full window.
Headline, body, and CTA overrides - optional copy overrides. Left blank, the popup describes the resolved offer itself.

The popup never appears while the chat window is open, and impressions, clicks, and dismissals are all tracked as analytics events so you can judge whether it earns its screen space.

No approved offer, no popup

The popup only ever surfaces a smart offer you have approved. Before showing anything, the widget asks the server to resolve an approved offer for the current page - if none resolves, nothing is shown, even with the popup enabled and its trigger firing. This is deliberate: proactive discounts are a margin decision, so the AI is never allowed to invent one on your behalf. An approved offer is then checked by the margin guard, which lowers or withholds it if it would sell below your floor when product costs are known. When costs are missing, a discount cap cannot guarantee profitability; add costs or block offers for those products.

Per-page, scheduled, and A/B themes

These controls are part of premium themes (Growth and above):

Per-page themes - use a different preset on product pages, collection pages, the cart page, the order status page, or post-purchase pages.
Scheduled themes - switch to a preset between a start and end time, for example during a seasonal sale. A schedule takes precedence while it is active.
Theme A/B test - pick a Variant B preset and a traffic split; Variant A is your saved theme. Each shopper stays in the same variant across visits, and the assigned variant is recorded so you can compare conversion.

The preview has a light and dark background toggle so you can check contrast against both kinds of storefront. You can also export a theme as a JSON file or a shareable code and import it into another store.

Proactive engagement (Growth)

Opens the chat with a targeted opener before the shopper clicks. Pick the triggers you want: exit intent, product-page dwell, scroll depth, cart hesitation, rage clicks, or a return visit. Choose an AI opener that adapts to the page, or a fixed message you write, then set the maximum proactive opens per session and a cooldown before a trigger can fire again. Any discount an opener mentions is checked by the margin guard first.

AI search answers (Growth)

Turns your theme’s search box into an answer engine. When a shopper submits a search, an overlay shows a short, cited answer from your catalog and knowledge base plus a matching product grid, and hands off to the full chat. Standard search inputs on Shopify, WooCommerce, and any input[type="search"] are detected automatically; add a CSS selector only if your theme uses a non-standard input. If no search box is found, your normal search runs untouched.

The Powered by footer (Enterprise)

The widget shows a “Powered by Zubby AI” footer. Hiding it or changing its label is part of the Enterprise white-label entitlement; on other plans the control is locked and the footer stays visible.

Saving

Changes only show on the storefront after you click Save. Reload a storefront page afterwards and check the widget on desktop and mobile.

Preview before saving

The designer shows a live preview as you edit, so you can review the theme without touching your storefront. Changes only reach shoppers when you save.

Check an offer before enabling it widely

Illustrative test: create an approved offer rule, save the widget settings, then test a qualifying product and one excluded by the rule. Confirm the shown price and cooldown. Missing product costs prevent the margin guard from establishing profitability: the configured fallback either keeps the percentage cap or blocks offers. Review cost coverage first. Also test keyboard close, focus return, mobile layout, text contrast and reduced motion.