Skip to main content

​
Step 1: Sign Into Chatbase and Configure Your Chatbase Chatbot

To add a Chatbase agent to your Shopify website, sign into your Chatbase account to create and set up a agent. 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 agent, here is a detailed guide on how to create a agent on Chatbase.

​
Step 2: Generate and Copy the Chatbot Embed Code

To embed your agent on your Shopify site, you’ll need to first generate an embed code for your agent. 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’s Playground page.
image
2. On the playground page, click on Connect at the top of the page.
image
3. Up next, click on Copy Iframe to copy the agent embed code.
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 agent. (For this example, we want to embed it in the Contact page)
image
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
5. Paste the embed code on the code editor and click Save on the top right corner of the page.
image
6. Click the source code icon again to return to the visual editor. A preview of your Chatbase agent should be loaded in the editor.
image
Your Chatbase agent 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 agent 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 agent customization options.
⌘I