Adding the MessageBird Omnichannel Widget to a Shopify store
In this guide, you’ll learn how to add the Omnichannel Widget to a Shopify store.
Prerequisites
Be the manager of your MessageBird Inbox account
Be an admin for your Shopify store
Enabling the Omnichannel Widget
1. Log in at dashboard.messagebird.com and go to Inbox or go directly to inbox.messagebird.com.
2. Go to Inbox settings.
3. Click on Channels and open Omnichannel Widget.
4. Customize your widget settings to make it match the style of your Shopify store (logo, colours, agent name).
5. Under Location make sure to whitelist your store’s website address (e.g. https://myshopname.myshopify.com/) to signal Inbox — it should accept chat requests coming from your Shopify store.
6. Done? Awesome! Hit Publish changes and activate the widget. You can always come back and change the Inbox settings.
7. Now that we finished the configuration on the Inbox side, let’s copy the code snippet by clicking Get code snippet.
Attaching widget to your Shopify store
Time to add the code by injecting it to all the pages via the master theme’s HTML body.
1. Go to your Shopify store admin panel, myshopname.myshopify.com/admin
2. Select Online store from the sidebar, and Themes from the submenu.
3. Choose Customize the current theme (or the one you want to add the widget to). This will open the theme editor.
4. In the left-bottom corner, click Theme actions and select Edit code from the pop-up. This will open a new page with the code files of your store.
5. Select the file called theme.liquid. If you do not have this, find the main file of your store — the one containing a <body> tag.
6. Scroll to the bottom of the page, and paste the widget’s code snippet before the closing </body> tag — it should insert a single line starting with <script> and ending with </script>.
7. And that’s it! Save the changes, publish the new site version and the Omnichannel Chat Widget will be visible on your Shopify store.
Last updated
