Shopify Integration Guide

A comprehensive guide to adding the Ollabot chatbot to your Shopify website.

Step 1: Sign Into Ollabot and Configure Your Chatbot

To add an Ollabot chatbot to your Shopify website, sign into your Ollabot account to create and set up a chatbot. If you don't have an Ollabot account, you can start by creating one for free. If you are not sure how to create a chatbot, here is a detailed guide on how to create a chatbot on Ollabot.

Step 2: Generate and Copy Your Ollabot Chatbot Embed Code

  1. Each chatbot created on Ollabot has a unique embed code for integration. Once your chatbot is set up on Ollabot, navigate to your Dashboard page and select the specific bot you want to integrate with your Bubble application.
Image

  1. Clicking on the bot will take you to its preview page. From there, go to the "Embed on Site" tab, and click the "Make Public" button.

  2. A pop-up window will appear with the provided HTML code. Click "Copy Script" to copy the code snippet.

Image

Step 3: Sign Into Your Shopify Website and Embed Your Chatbot

To add the embed code to your Shopify website:

  1. Log into your Shopify account and head to your Shopify admin page.

  2. On the left sidebar of the admin page, click on "Online Store" and then click on "Pages" to reveal the list of pages on your store website.

  3. Click on the page you wish to embed the chatbot. (For this example, we want to embed it in the Contact page)

  4. The page you click on should open on an HTML editor, click the source code icon on the top right corner of the editor.

Image
  1. Paste the embed code on the code editor and click "Save" on the top right corner of the page.
Image
  1. Click the source code icon again to return to the visual editor. A preview of your Ollabot chatbot should be loaded in the editor.
Image

Your Ollabot chatbot has now been added to your Shopify website. You can optionally click the "View page" button on the top right corner of the page editor to see how your chatbot will look on your live page.

Note: You can customize the appearance and colors of your bot on your Ollabot dashboard. To do this, go to your dashboard, choose a bot, click the "Settings" tab on the top of the page, and then click "Chat Interface" on the left sidebar to reveal the chatbot customization options.