←back to tutorials

How to Embed an AI Chatbot to your Shopify Store

Learn how to embed an AI chatbot to your Shopify Store using the widget iFrame. This tutorial covers how to create a chatbot Widget in ChatBotKit, generating the iFrame and installing it to your Shopify Store

Are you looking to add an AI chatbot to your Shopify store? In this tutorial, we'll show you how to do just that using ChatBotKit's widget integration. You'll learn how to create a chatbot widget in ChatBotKit, generate an iFrame, and install it on your Shopify store. Let's get started!

If you are using ChatBotKit's widget integration, you might want to embed it directly on your Shopify Store. Fortunately, you can do this easily using the widget iframe.

Step 1: Setup

Let’s first start by creating our widget:

  1. Go to Integrations and then click the Create Widget Integration button.
  2. Fill in the Name and provide your chatbot Backstory.
  3. Connect to an existing Bot or select a Model, Dataset and Skillset.
  4. Save the integration by clicking the "Create" button.

Once we are happy with our widget configuration we are ready to install it on our Shopify Store.

Step 2: Installation

There are currently two methods in adding the ChatBotKit widget to your Shopify store. The first one is to embed the widget directly on any page using the iFrame option. The second method is to use ChatBotKit’s generated script tag. In this tutorial, we will only cover the first option for embedding the ChatBotKit widget.

Currently Shopify supports script tags only for Shopify Plus Accounts. To read more about script tags you can navigate to Creating & Enabling Scripts

After customizing your widget, you'll need to install the code on your Shopify store. To do this, copy the HTML code below and change the {WIDGET_ID} to the id of your Widget Integration.

<iframe id="chatbotkit-frame" src="https://static.chatbotkit.com/integrations/widget/{WIDGET_ID}/frame" width="600" height="700"></iframe>

The easiest way to find the ID of your widget integration is to copy the last part of the URL in ChatBotKit. As you can see from the example below the clgniuloj06itpx0gvw9ts45c is your ID.

https://chatbotkit.com/integrations/widget/clgniuloj06itpx0gvw9ts45c

Next, log in to your Shopify store and navigate to the "Online Store" tab. Click on "Pages" and select the page you want to install the widget on. Once you've selected your page, click on "Show HTML".

From here, you can Paste the HTML code we configured earlier on the editor and click “Save”.

To view your widget, you can navigate to the page we’ve installed the widget on and that’s all. If you wish to further customise your Widget you can follow this detailed guide that explains just that.

Conclusion

Adding an AI chatbot to your Shopify store can be a great way to provide your customers with an improved shopping experience. In this tutorial, we've covered how to create a chatbot widget in ChatBotKit, generate an iFrame, and install it on your Shopify store. Remember to customize your widget to best suit your business needs.