Deploying the Chat Widget
Add the chat widget to your Shopify storefront so customers can start chatting with your AI.
Add the Widget to Your Theme
There are two ways to add the chat widget to your store:
Option A: From the Supportify App (Easiest)
- Open the Supportify app in your Shopify admin.
- Go to Chatbot Setup and look at the Overview section.
- Click the "Add to Theme" button.
- This opens your Shopify Theme Editor with the Supportify widget block pre-selected.
- Click Save in the theme editor.
Option B: From the Shopify Theme Editor
- In your Shopify admin, go to Online Store → Themes.
- Click Customize on your active theme.
- In the theme editor sidebar, scroll down to App embeds (or App blocks, depending on your theme).
- Find "Supportify Chat Widget" and toggle it on.
- Click Save.
That's it!
The chat bubble will now appear on every page of your store. Customers can click it to start a conversation with your AI chatbot.
Check Deployment Status
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.
Tip
If the status shows "Not Deployed" after you've added it, make sure you clicked Save in the theme editor. Also check that the app block is toggled on, not disabled.
Customize the Widget Appearance
You can customize how the chat widget looks directly in the Shopify Theme Editor. After adding the widget block, click on it in the sidebar to see the customization options:
- Bubble color — The color of the chat bubble icon in the corner of your store.
- Header color — The top bar of the chat window.
- Message colors — Background colors for customer and AI messages.
- Background color — The chat window background.
- Font family — Match it to your store's font.
- Border radius — How rounded the corners are.
- Window size — Small, medium, or large chat window.
- Position — Bottom-right or bottom-left of the screen.
- Welcome message — The first message customers see when they open the chat.
- Input placeholder — The gray text in the message input box (e.g., "Ask me anything...").
Tip
Changes are previewed live in the theme editor. Play with the settings until the widget matches your store's design, then click Save.
Test It on Your Live Store
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.
Good to know
The widget only appears on your live, published theme. If you're editing an unpublished draft theme, the widget won't show on your live store until you publish that theme.
Troubleshooting
Widget doesn't appear on my store
- Make sure you saved the theme editor after enabling the widget.
- Check that the app block is toggled on (not disabled) in the theme editor.
- Clear your browser cache or try an incognito window.
- Make sure you're looking at the published theme, not a draft.
Widget appears but nothing happens when I type
- Check the Supportify dashboard — is the chatbot active?
- Make sure at least one capability is enabled in Chatbot Setup.
- If you're on the free tier, check that you haven't used all 50 sessions this month.