The chat widget — the floating bubble on your storefront — is fully customizable from Publish → Widgets → Bubble widget. This article walks through the four blocks of the customization modal, every control inside them, and how the live preview helps you make decisions.
In this article
Where customization lives
The customization modal at a glance
Widget style — the visual block
Content — messages and predefined inquiries
Behavior — email capture, microphone, proactive nudges
Custom CSS — for edge cases only
The live preview
Saving and discarding
Where customization lives
Open Publish → Widgets. The first card is Bubble widget chatbot — "Through Convi's bubble widget on your shop, customers can chat with the AI-powered chatbot to ask questions, get help, and quickly resolve issues." Click Manage to open the customization modal.
The modal is a full-screen workspace with the editor on the left and a live preview of your widget on the right. Anything you change updates the preview instantly.
ℹ️ Note: Style controls (color, size, position, custom logo) and Custom CSS are gated by the Customize widget style permission. Microphone (speech-to-text) is gated by its own permission. If your plan doesn't include one of these, a lock icon appears next to the field.
The customization modal at a glance
Four collapsible blocks, from top to bottom:
Widget style — "Customize your brand: set colors, logos, and choose where to display your app icon and avatar."
Content — "Define your app messages and content" (welcome messages, predefined inquiries, placeholder).
Behavior — "Set how your assistant starts and ends conversations" (email capture sensitivity, microphone, proactive speech bubbles).
Custom CSS — escape hatch for advanced styling.
Widget style — the visual block
This block covers what shoppers see at a glance:
Primary color — a color picker. This sets the widget's brand accent (bubble background, header, send button, etc.).
Bubble icon size — Small, Medium, or Large. Pick Small for cluttered storefronts, Large for desktop-first stores.
Launcher position — Left or Right, plus two numeric inputs for Side spacing and Bottom spacing (in pixels). Lets you nudge the bubble away from a sticky cart button, support widget, or footer.
Bubble icon — upload a custom icon (square, max 1024×1024 px). Defaults to the Convi mark; you can also remove a custom icon to revert.
Avatar / Custom logo — a separate image used in the chat header (different from the launcher icon). Some stores use a brand mark for the launcher and a smaller "store associate" avatar in the chat itself.
Show "powered by" trademark — on by default. Turn it off to hide the Powered by Convi line below the chat. This is plan-gated.
Content — messages and predefined inquiries
The Content block handles the actual text shoppers see:
Chat welcome — the first message the assistant displays when a shopper opens the chat. Keep it short and inviting (e.g. "Hi! How can I help you today?").
Start chat button — the label on the button that opens the chat from the widget's home view.
Placeholder — the placeholder text inside the input field (e.g. "Type a question…").
Predefined inquiries — a list of suggested first messages shown as chips on the chat's home view. Add, remove, or reorder them.
The chips are the most powerful single control here — they tell shoppers what Convi is good at. See Setting up Predefined Inquiries & Pre-chat Surveys for a deeper guide.
Behavior — email capture, microphone, proactive nudges
Three behavioral toggles:
Email capture sensitivity — Conservative, Balanced, or Aggressive. "Choose how often the AI assistant should ask shoppers for their email during a conversation." Default is Balanced.
Microphone (speech-to-text) — "Allow customers to use their microphone to dictate messages instead of typing." Plan-gated. Turn on if your shoppers are mobile-heavy.
Proactive speech bubbles — "Show contextual nudge messages to shoppers after 30 seconds on key store pages (homepage, product, collection, category, search results) to increase engagement." Page-aware, dismissible per shopper.
💡 Tip: If you sell to a price-sensitive audience and you're worried about looking pushy, run with Conservative email capture and proactive speech bubbles off. You can always turn them up later when you have data.
Custom CSS — for edge cases only
A code editor at the bottom of the modal lets you write your own CSS scoped to #convi-widget. Use it when:
You need to match a brand pixel-perfectly and the regular controls don't get you there.
You want to hide or restyle a sub-element (e.g. a specific button).
You're integrating with an existing design system that has its own typography scale.
Custom CSS is plan-gated.
The live preview
The right side of the modal renders the widget exactly as a shopper would see it. The preview is interactive — you can open the chat, switch between the home view and the chat session view, and feel how your color/size/position choices play together. The preview reflects every unsaved change in real time.
Saving and discarding
The modal has a Polaris save bar built in:
Save — applies all changes (style + content + behavior + custom CSS) in a single transaction. A toast confirms: "New settings have been saved."
Discard — reverts everything to the last saved values.
If you close the modal without saving, your changes are discarded.