Shopify
Step 1: Sign Into Chatbase and Configure Your Chatbase Chatbot
To add a Chatbase chatbot to your Shopify website, sign into your Chatbase account to create and set up a chatbot. If you don't have a Chatbase 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 Chatbase.
Step 2: Generate and Copy the Chatbot Embed Code
To embed your chatbot on your Shopify site, you'll need to first generate an embed code for your chatbot. To do this:
1. Head over to your Dashboard page and click on the bot you want to embed on your Shopify website to reveal the bot preview page.
2. On the bot preview page, click on Connect at the top of the page.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F34b6820704081b1c7517d392195d8832d23339bc-1581x873.png&w=3840&q=75&dpl=dpl_FYieojboMXMFqd22d3ydjHztp5pe)
3. Up next, click on Copy Iframe to copy the chatbot embed code.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F30c32b268821633a78d7c130f840407eb84c5613-1547x845.png&w=3840&q=75&dpl=dpl_FYieojboMXMFqd22d3ydjHztp5pe)
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)
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2Ff3e70c4fc77c3bf549e36fe2c3ff9f01b0801cbe-1914x883.jpg&w=3840&q=75&dpl=dpl_FYieojboMXMFqd22d3ydjHztp5pe)
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.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F3eaa5f520539615bba193fe70a83cf44ac3d974f-1897x866.jpg&w=3840&q=75&dpl=dpl_FYieojboMXMFqd22d3ydjHztp5pe)
5. Paste the embed code on the code editor and click Save on the top right corner of the page.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F616842a41ebd719aaeea401a42242829713347b1-1875x786.jpg&w=3840&q=75&dpl=dpl_FYieojboMXMFqd22d3ydjHztp5pe)
6. Click the source code icon again to return to the visual editor. A preview of your Chatbase chatbot should be loaded in the editor.
![[object Object]](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fi6kpkyc7%2Fprod-dataset%2F089cdc1d1aac5ef81f926002ebb7135a84f6aedd-1894x888.jpg&w=3840&q=75&dpl=dpl_FYieojboMXMFqd22d3ydjHztp5pe)
Your Chatbase 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 Chatbase 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.