Skip to main content
The website widget is a chat button on your site that opens a conversation with your agent. Setup takes about five minutes: turn the channel on, copy one line of code into your site, and list the domains it may run on.
Who can do this: admins of the workspace. You need: an agent that is published, and access to edit your website’s code or theme.

​
1. Turn on the widget

  1. Open Agents and choose the agent that should answer chats.
  2. Go to Channels and open Website widget.
  3. Choose Enable widget channel.
The page now shows Installation with your snippet and an empty Allowed origins list.

​
2. Allow your domains

The widget only loads on domains you list. Until you add one, it won’t work anywhere.
  1. Under Allowed origins, choose + Add origin.
  2. Enter your site’s address with https:// and nothing after the domain, for example https://www.your-shop.no.
Each address must match exactly what’s in the browser’s address bar: You can paste several addresses at once, separated by commas or spaces.

​
3. Paste the snippet into your site

Copy the snippet under Installation with Copy. It looks like this, with your own key:
The widget key is public: it identifies your widget, and it is safe in your page source. Your allowed origins are what stop other sites from using it.
  1. In Shopify admin, go to Online Store → Themes.
  2. Next to your theme, choose ⋯ → Edit code.
  3. Open layout/theme.liquid.
  4. Paste the snippet on the line just above </body>, then choose Save.
Test on a copy of your theme first. Choose ⋯ → Duplicate, add the snippet to the copy, and preview it. Remember to add the preview’s shopifypreview.com address to Allowed origins.

​
4. Check that it works

Open your site in a new private window. The chat button appears on the page. Ask it something your agent knows, and the conversation shows up under Conversations in Ask. Conversations carry over as customers move between pages on your site.

​
Change how it looks

Under Appearance on the same page you can set the primary colour, the text on the chat button, the widget’s language, and a proactive message that opens after a delay. The preview on the page updates as you change things.

​
Hide the widget for a while

Switch off Show the widget on your website. The chat button disappears from every page the next time it loads. A chat that is already open stays until that visitor leaves the page. Switch it on again to bring the button back; you don’t need to touch your site’s code. To remove the widget for good, delete the snippet from your site.

​
Common problems

Check, in this order:
  1. The domain is listed. The address in the browser must be in Allowed origins exactly, including www if your site uses it. This is the most common cause.
  2. The widget is switched on. Show the widget on your website must be on.
  3. The snippet is on the page. In your browser, right-click the page, choose View page source, and search for widget.js.
  4. The page was reloaded. Changes apply the next time a page loads.
Shopify serves previews from a different address, ending in shopifypreview.com. Add that address to Allowed origins while you test, and remove it afterwards.
The widget always talks to the agent’s published version. Changes you save as a draft reach customers only after you publish the agent. An agent that has never been published can’t start a chat at all.