Four Widget Formats for Shopify Chat

The Four Formats

1. Chat Bubble

The familiar floating button anchored to the bottom corner of every page. Click to open a conversational AI assistant. This is the default and the safest choice for most stores—it's unobtrusive, universally understood, and takes up zero screen real estate until clicked.

2. Search Bar

A persistent search input (typically placed in your header) that opens a modal when clicked. Best for stores that want the AI to act as a smart product search first and a conversational assistant second. Customers type a query, get instant product results—and can continue the conversation if they need more help.

3. Slideout Panel

A side panel that slides in from the left or right edge of the page. More committed than the chat bubble (takes up more screen real estate when open) but feels more like a dedicated assistant. Side is configurable. Works well on help centers, documentation pages, or any page where the customer is likely to have a longer conversation.

4. Smart Banner

A persistent banner pinned to the top or bottom of the page that prompts engagement. The most attention-grabbing format—useful for promoting limited-time offers, new product launches, or driving engagement on landing pages where you want the AI to proactively start a conversation.

Per-Visitor Format Overrides

The real power is in combining formats with conditional rules. Instead of picking one format for your entire store, you can serve different formats to different visitor segments:

• Mobile shoppers → slideout panel. A chat bubble in the corner of a 375px screen is hard to tap. A slideout panel uses the full width and feels more natural on mobile.
• First-time visitors → smart banner. New visitors need a nudge. A banner at the top says "Welcome! I can help you find the right product" and opens the chat when clicked.
• Collection pages → search bar. Customers browsing a collection are in discovery mode. A search bar lets them filter products through AI without navigating away.
• Product pages + 15s dwell → chat bubble auto-open. Combine a URL path rule with a proactive time-on-page trigger. If someone's been staring at a product for 15 seconds, pop open the chat with a product-specific greeting.

This is configured through the Conditional Rules system. Each rule can override the widget format for its matching visitors, alongside greeting, quick questions, and visibility overrides.

Inline Placement

All four formats can also be embedded inline at specific locations in your page using a simple HTML container:

<div data-milly-chat
     data-format="search"
     data-placement="help-center">
</div>

Useful for embedding a search bar in your header, a chat panel in a help center section, or a product Q&A widget directly on a product page. Multiple inline placements can coexist on the same page, each with its own format and styling.

Sticky Add-to-Cart Across All Formats

Regardless of which format you choose, the Sticky ATC bar works the same way: once the AI recommends a product, a persistent add-to-cart bar anchors to the bottom of the widget. It stays visible as the customer keeps chatting, showing the most recently recommended product with its image, price, and an Add to Cart button.

Which Format Should You Use?

Start with the chat bubble as your default—it's the most universally accepted pattern and requires zero explanation for customers. Then use conditional rules to override the format for specific pages or segments where a different format makes more sense.

Most stores end up with 1-2 format overrides: a search bar for collection pages and a slideout for mobile. That's enough to meaningfully improve the experience without over-engineering the setup.

Frequently Asked Questions