Skip to main content

Embedding the Chatbot on Your Store

After Shopify is connected, add the ChatMaven chat widget to your storefront so shoppers can ask about products, orders, and more — live on your Online Store.

This page covers the recommended App embeds path and the fallback theme.liquid script method, with step-by-step images.

Prerequisite

Complete How to connect ChatMaven to Shopify first. Configure must show Connected, and the Shopify Integrations toggle must be on.

Watch the chatbot embed video​

Watch the video below for a walkthrough of embedding the ChatMaven chatbot on your Shopify store. You can also follow the written steps in this guide.

Open the Shopify chatbot embed video on Google Drive in a new tab if the player above does not load.

Add to a Website​

On the Shopify Overview tab, under Add to a Website, ChatMaven shows two paths:

Recommended (Shopify): Enable the Theme App Extension in Shopify (App embeds) and paste your Agent unique ID there.

Fallback: Copy the script snippet from Overview and add it to your theme (steps below). Use this path for manual theme edits or non-Shopify sites.

The script format looks like:

<script defer src="https://live.chatmaven.ai/chat-bot-embed.js" data-bot-id="YOUR_AGENT_UNIQUE_ID"></script>

Use the Copy script control next to the code block so you paste your real data-bot-id.

Step 1 — Overview Add to a Website with embed script

Fallback: paste the script in theme.liquid​

Step 1: Copy the embed script in ChatMaven​

  1. Go to Agents → Integrations.
  2. On the Shopify card, click Configure.
  3. Open the Overview tab.
  4. Under Add to a Website, click Copy script.

Step 2: Open Edit code in Shopify Admin​

  1. In Shopify Admin, go to Online Store → Themes.
  2. On your active theme, open the … (more actions) menu.
  3. Click Edit code.

Step 2 — Online Store Themes Edit code

Step 3: Paste the script before </body>​

  1. In the theme code editor, open Layout → theme.liquid.
  2. Paste the ChatMaven script just before the closing </body> tag.
  3. Save the file.

Step 3 — Paste embed script in theme.liquid

Step 4: Confirm the widget on your storefront​

Open your Online Store and look for the ChatMaven chat launcher (for example bottom-right). Click it to open the chat — shoppers can ask questions such as order status.

Step 4 — Chatbot live on the Shopify storefront

tip

The widget uses the same agent you connected under Integrations. Test with a real or sandbox order so you can confirm order lookup and product answers behave as expected.

FAQ and troubleshooting​

The chat widget does not show on my storefront​

Confirm the Theme App Extension / App embeds path is enabled with your Agent unique ID, or that the fallback script is present in theme.liquid before </body>. Save the theme, preview in an incognito window, and hard-refresh the storefront.

Which method should I use?​

Prefer the recommended Theme App Extension / App embeds path when available. Use the theme.liquid script as a fallback when you need a manual embed or are placing the widget on a non-Shopify page.

Do I need a different script per store?​

The script’s data-bot-id is your Agent unique ID. Use the Copy script value from the agent you connected to Shopify so the storefront talks to the correct agent.

Need help?​