Widget overview
The widget is the surface where your shoppers actually talk to the AI. It comes in two placements - a floating launcher and an inline chat block - that share the same conversation runtime, analytics, and brand styling, plus optional proactive opens and popup offers on top of the launcher.
Placements
Most stores start with the launcher, then add an inline chat block on specific pages where the AI is a hero rather than an accessory.
| Mode | What it looks like | Best for |
|---|---|---|
| Launcher | Floating bubble in the bottom-right (or bottom-left); expands into a chat panel on click. | Default. Always available, never intrusive. Use on every page. |
| Inline chat block | Embedded inside a page section (iframe, or the [zubby_ai] WordPress shortcode); shoppers tap the chat button inside the block to start. | Landing pages, support pages, “ask the AI” sections. |
| Proactive opens & popup offers | Not separate embeds: the launcher’s loader can open the chat on behavioral triggers (proactive engagement, Growth plan and above) or show a popup offer card on time on page or exit intent, both configured in the Widget Designer. | High-intent moments: leaving the page, dwelling on a product page. |
How the widget loads
- A single per-store loader script (grab it from
Dashboard → Widget Designer) runs on your storefront. Your store’s widget key, colors, and launcher styling are pre-baked into it - no config object to maintain. - On page load it renders only a lightweight launcher button and collects page context (page type, URL, product on product pages) so the AI knows where the shopper is standing.
- The full chat UI lives in an iframe served from Zubby and is only created on the first click - visitors who never open chat never download it. Chat requests carry the widget key and are rate-limited server-side.
Why an iframe?
What the widget can see
Out of the box, the widget reads:
- The current page’s URL, title, and referrer, plus an inferred page type (home, product, collection, cart, checkout) - used so the AI answers in context.
- On product pages: the product being viewed (ID and title), so “does this come in medium?” needs no clarification.
- An anonymous visitor key stored in the browser - a short opaque ID, no PII.
- On Shopify: the logged-in customer’s identity, verified through the Shopify App Proxy signature - so the AI can greet returning customers by name and answer order questions safely.
The chat loader does not scrape password or payment fields. A shopper can type an email in chat. Connected Shopify and WooCommerce identity bridges can also supply signed-in customer details, including an email, through the supported integration. Identity supplied by a verified bridge is different from an unverified email typed in chat; private order access still requires verified identity. Recovery capture has separate eligibility and consent rules.
What you can configure
From Dashboard → Widget Designer, you can:
- Pick a mode and grab the matching embed code. See Embed codes.
- Style it - theme presets, colors, typography, launcher shape and label, dark/light mode, per-page and seasonal theme overrides. See Designer & themes.
- Customize copy - agent name, welcome message, and the widget’s text strings via overrides.
- Shape behavior - brand voice (it changes how the AI actually writes, not just the UI), proactive popup triggers, cart-rescue thresholds, and AI flow toggles like lead capture and guided selling.
- Decide what the AI may do with orders in
Settings → AI. Cancellation, full refund and order edits start off. Shopify has executable paths with permission, ownership and confirmation checks; WooCommerce and custom stores route those requests to tickets. Shipping address changes are a separate switch that starts on, with supported Shopify and WooCommerce paths. See the platform action limits. - Hide it where it shouldn’t appear - cart/checkout, specific paths, mobile. See Audience rules.
Language is automatic: the widget detects the shopper’s language from the storefront and browser, and the AI replies in it. See Languages.
Performance
The loader uses a facade pattern: until a shopper clicks, only the small launcher button exists on your page - the chat iframe isn’t created until it is opened. Hovering the launcher can preconnect to Zubby. Lazy loading reduces initial chat work, but the loader, tracking and other enabled storefront features still run. Measure your own pages before and after installation; no zero-impact Core Web Vitals result is guaranteed.
Check the placement before launch
- Save the placement in Widget Designer and install its matching embed once.
- In a private browser window, open a product page on desktop and mobile. Check that the launcher does not cover checkout controls.
- Open chat, ask about a known product, then close and reopen it. For inline placement, check that the surrounding page still scrolls.
- Compare repeated page-load measurements under the same conditions. Test with your consent and audience rules enabled.
Where to go next
- Designer & themes - make it look like your brand.
- Audience rules - decide where it shows.
- Embed codes - paste it into any storefront.