Deploying the Chat Widget

There are two ways to add the chat widget to your store:

After adding the widget, go back to the Supportify app and check the Overview section in Chatbot Setup. You'll see a deployment status:

• Live (green badge) — The widget is deployed and working.
• Not Deployed (gray badge) — The widget isn't active on your theme yet.

There's also a confidence indicator that shows how sure we are the widget is working:

• Very High — Widget found in your theme AND customers have had recent conversations.
• High — Widget found in your theme.
• Medium — No widget found in theme, but there are recent conversations (maybe embedded a different way).
• Low — Neither widget nor conversations detected.

Start from one of the ready-made looks under Chatbot Setup → Appearance in the Shopify app, or Chatbot → Appearance in your Supportify dashboard — both edit the same widget. Each one changes the whole window at once — surface, typography, corners and the way the header is drawn — so you are picking a style rather than assembling one from colour pickers.

• Classic — a coloured header bar in your brand colour. This is what the widget has always looked like, and it stays selected until you choose otherwise.
• Editorial — serif headings on warm paper, with no header bar. Suits fashion and beauty.
• Soft — rounder corners on a light tint. Suits lifestyle and wellbeing.
• Minimal — flat white with hairline borders. Nothing but the conversation.
• Contrast — a dark window, for dark storefronts and for standing out on light ones.

Your accent colour is kept when you switch templates, so you can try each look in your own brand colour. Leave the accent empty and each template uses its own.

The template, accent colour, welcome text, quick questions and the question over the rating stars can all be set in the Shopify app. Your logo, the window size and the finer styling are in the dashboard.

Two more choices on the same screen change what customers actually do in the chat.

On Shopify you can also adjust the widget in the Theme Editor, per storefront. Click the widget block in the sidebar to see the options: bubble and header colours, message colours, background, font, window size, position, the welcome message and the input placeholder.

Anything you change here overrides the template, because the theme editor is specific to this storefront. Leave a colour at its default and the template decides it. The theme editor also has its own Widget Template and Product Recommendations settings, both set to Use Supportify settings — leave them there and the dashboard is in charge everywhere.

Anything on your store can open the chat window: a menu entry, a footer link, a "Contact support" button on your FAQ page. Point it at #supportify-chat and the widget opens right where the shopper is, without leaving the page.

• A menu or footer link — in Shopify, go to Online Store → Navigation, add a menu item and type #supportify-chat as its link.
• A link in a page or section — link the text to #supportify-chat.
• A button in your theme's HTML — give it the attribute data-supportify-open, for example a button with that attribute and the text "Chat with us".
• From your own script — call ShopAIChat.open() or ShopAIChat.close().

A link to your store that ends in #supportify-chat, in an email or on another site, opens the chat as soon as the page loads.

After deploying, visit your store in a regular browser window (not the theme editor). You should see the chat bubble in the corner of the page. Click it and try sending a message to make sure everything works.