chatleadr Docs
Open Chatleadr

How to Add a Chatbot to a Shopify Store

Shopify runs on Liquid themes, and every storefront page is rendered through one layout file. Two script tags in that file put the widget on the whole storefront at once.

Time: about fifteen minutes. You need: a Shopify store, permission to edit theme code, and a Chatleadr bot.

Shopify: where to paste it Online Store Themes Edit code theme.liquid theme.liquid, just above </body> <script>window.CHATLEADR_BOT_KEY = "…";</script> <script src="https://chat.chatleadr.com/widget/app.js"></script> Editing the theme, so duplicate the theme first if the store is live.
Where the Chatleadr snippet goes on Shopify. Paste it into the body or footer slot, not the head.

1. Set the Bot's Domain#

Open your bot in Chatleadr, go to the Setup tab, and enter your storefront domain in the Domain field. Use the domain customers see rather than the something.myshopify.com address, if you have connected your own.

The bot answers on that domain, and on any other addresses recorded for it. For putting it on a separate blog or landing page as well, see install on any website.

2. Copy Your Snippet#

In Chatleadr, open the bot and go to Channels. The Web section shows the snippet with your bot key already in it.

Channels Website Snippet Paste a code snippet into Wix, Shopify, Squarespace or any other site. Connected Show the snippet Website Snippet Paste this just before the closing </body> tag, on every page you want the chat on. <script> window.CHATLEADR_BOT_KEY = "cl_7f3a9d21"; window.CHATLEADR_API_URL = "https://chat.chatleadr.com"; </script> <script src="https://chat.chatleadr.com/widget/app.js"></script> Copy Done
The snippet in the dashboard already contains your bot key. Copy it from there rather than typing it out.

3. Duplicate the Theme First#

This step edits theme code on a store that is probably taking orders. In Online Store, then Themes, open the ... menu on your live theme and choose Duplicate. The copy is the way back if anything goes wrong.

4. Paste It Into theme.liquid#

Still in Online Store, then Themes, open ... and choose Edit code. In the Layout folder, open theme.liquid.

Scroll to the bottom, paste the snippet immediately before the closing </body> tag, and click Save.

html
  <!-- Chatleadr Widget Installation -->
  <script>
    window.CHATLEADR_BOT_KEY = "your-bot-key";
    window.CHATLEADR_API_URL = "https://chat.chatleadr.com";
  </script>
  <script src="https://chat.chatleadr.com/widget/app.js"></script>
</body>

5. Check It#

  1. Open your storefront in a private window.
  2. The launcher appears in the corner within a second or two.
  3. Send a message and confirm a reply comes back.
  4. In Chatleadr, the bot's conversation count goes up by one.
Step 1 Paste the snippet Before the closing body tag,on every page. Step 2 Launcher appears In the corner, within asecond of the page loading. Step 3 The counter moves Send one message. Thedashboard total goes up by one.
What a working installation looks like from the outside.

Which Pages Get the Widget#

Every page rendered through theme.liquid carries it: product, collection, cart, blog and page templates.

Two areas render outside the storefront theme and are outside the snippet's reach: Checkout, which only Shopify Plus stores can customise, and Shopify's system pages.

If It Does Not Appear#

Nothing in the corner. View source on a product page and search for CHATLEADR_BOT_KEY. If it is missing, the edit was saved to a theme that is not the published one, which is easy to do straight after duplicating.

It appears twice. The snippet is in theme.liquid and also in a second place, commonly a theme setting or an app that injects scripts. Remove one.

The launcher opens but no reply arrives. The snippet is working and the bot is not answering. Check that the bot is active, then work through my workflow is not triggering.

Common Questions#

Is There a Chatleadr App in the Shopify App Store?#

No. Installation is two script tags in theme.liquid, so nothing is added to the store's app list.

Will the Chatbot Slow My Store Down?#

No. The snippet loads at the end of the body and does not block rendering. See install on any website.

Can the Chatbot Answer Questions About My Products?#

Yes, once the product information is in the bot's knowledge base, and a workflow can call your own endpoint for live stock or order status. See answer product questions from your catalogue.

Can I Use One Bot on Two Shopify Stores?#

Yes, once the second storefront's address is recorded for the bot. Email support@chatleadr.com with the bot's name and that address to have it recorded. Both storefronts then get the same knowledge, the same workflows and one set of analytics, so two ranges that need different answers are better served by two bots. See plans and limits for how many bots each plan includes.

Does It Survive a Theme Update?#

No. The snippet is part of the theme, so a theme update or a theme switch removes it and it has to be pasted in again.