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

Step 1: Widget Setup

Let’s first start by creating our widget. You can skip this step if you already have one:

  1. Go to Integrations and then click the Create AI Widget button.
  2. Fill in the Name and provide your chatbot Backstory.
  3. Connect to an existing Bot or select a ModelDataset 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: Widget Code

You need to grap the widget code which we will need for Step :

  1. Open your widget and scroll down until you see all action buttons

  2. Click the “Install” button.

  3. Copy the code and save it for later.

Step 3: Shopify Installation

In this step we simply need to add the code into your theme.

  1. Go to “Online Store” and then “Themes” section of your Shopify store.

  2. Click the “Customize” button

  3. Click the 3 dots button on the top left and then click the “Edit code” button.

  4. Paste the script we copied from Step 2 in the head section and click the “Save” button.

Conclusion

Adding an AI chatbot to your Shopify store can be a great way to provide your customers with an improved shopping experience by providing product recommendations, order tracking and much more.

Check out the following great example: