Skip to content

How to Add an AI Chatbot to Magento 2 (No Extension Needed)

Add an AI chatbot to Magento 2 or Adobe Commerce from the admin: where the footer script box is, flushing the cache, checkout CSP, and teaching it your catalogue.

By The Biggest NerdPublished 6 min read

In this guide
  1. Before you start, on our side
  2. Step by step: the Miscellaneous HTML box
  3. If the chat doesn't appear
  4. Teaching it your catalogue
  5. What it can't do on Magento
  6. Frequently asked questions

To add an AI chatbot to Magento 2 or Adobe Commerce, paste the chatbot's script into Content, then Design, then Configuration, in your store view's Other Settings, Footer, Miscellaneous HTML box. Then save and flush the Magento cache. You don't need an extension, a Composer package or a theme edit, and a theme upgrade won't remove it. The step most people miss is the cache flush: until you do it, Magento keeps serving pages without the chat, which looks exactly like the install failing.

Our Magento install page has the short version. This guide covers each step, the content security policy that keeps the chat off the checkout, and how to teach the assistant a large catalogue.

Before you start, on our side

  1. Sign up and start the free trial: three days with every Growth feature and 100 replies.
  2. In the dashboard, type your store's address under Your website and press Save website. The chat only answers on addresses saved there. If your store runs on more than one domain, such as a separate domain per store view, save each one.
  3. Copy your script tag. It looks like this:
<script src="https://thebiggestnerd.com/widget.js" data-key="your-key" async></script>

Step by step: the Miscellaneous HTML box

You need an admin user who can change design configuration.

  1. In the Magento admin, go to Content, then Design, then Configuration.
  2. The grid lists a Global row, then each website, store and store view. Click Edit on the row your customers see. Editing Global puts the chat on every store view at once. Editing a single store view puts it only there, which is what you want if you're trying it on one store first.
  3. Scroll to Other Settings and expand Footer.
  4. Paste the script tag into Miscellaneous HTML. Adobe's page setup documentation describes this field as the place for scripts that must go before the closing </body> tag.
  5. Click Save Configuration.
  6. Go to System, then Cache Management, and press Flush Magento Cache.
  7. Open the storefront in a private or incognito window and look for the chat bubble in the corner.
  8. Back in our dashboard, the status under Your website changes to Live within a minute of that first visit.

If a store view already has something in Miscellaneous HTML, such as an analytics tag, add our line underneath it. Don't replace what's there.

There's a second box, HTML Head, then Scripts and Style Sheets, which goes at the top of every page. Our script works there too, because it's async and doesn't hold up the page. The footer box is the better place for anything that isn't needed to draw the page, and it's where support teams expect to find a chat widget.

If the chat doesn't appear

Work down this list. It's in order of how often each one is the cause.

  1. The cache. Flush it again. If you use Varnish, Fastly or Cloudflare in front of Magento, purge that cache too. On Adobe Commerce cloud, Fastly is the usual one.
  2. The wrong scope. If you edited one store view but are looking at another, there's nothing there. Check the scope in the design configuration grid, or put it on Global.
  3. The address isn't saved on our side. The script loads, but the chat won't answer on an address it doesn't know. Save the exact domain customers use, with or without www, under Your website.
  4. A content security policy. Since Magento 2.4.7, payment pages run a strict content security policy by default, and every other page reports violations without blocking them. Adobe's 2.4.7 release notes cover the change. So the chat shows on the storefront and not on checkout. That's normally what you want: someone mid-payment shouldn't have a chat bubble over the card form. If a developer has switched the whole store to restrict mode, they'll need to add thebiggestnerd.com to the store's allowlist (csp_whitelist.xml) for scripts and connections, and allow the small block of styles the chat window adds.
  5. A cookie banner that blocks scripts. Some consent extensions hold back third-party scripts until a visitor accepts. If yours does, categorise our script as functional, or ask the extension's support where to allow it.

Teaching it your catalogue

A chat bubble that doesn't know your products isn't much use. There are two bulk routes.

Your sitemap, for every page. Magento generates one under Marketing, then SEO & Search, then Site Map. Generate it if you haven't, then note its address. It's usually yourstore.com/sitemap.xml, or /pub/sitemap.xml on some installs. In our dashboard, under Whole site, paste that address and press Read the whole site. It reads your product, category and CMS pages, which is where your shipping, returns and warranty policies live. Our guide to training a chatbot on your sitemap covers which pages to remove afterwards, such as old promotions.

A product feed, for prices and stock. Pages tell the assistant what a product is. A feed tells it the current price and whether it's in stock. If you already send a feed to Google Merchant Center from a feed extension, paste that feed's address under Products and press Read products. We read the Google Shopping XML format, plus RSS and Atom. Read it again when prices change, because it doesn't sync on its own. The product questions page shows what it can answer from a feed.

Then test it with the questions your support inbox actually gets: delivery times to a postcode, your returns window, whether a size runs small. It answers only from what it has read, and when the answer isn't there it says so. Those questions go on your list of unanswered questions so you know which page to write next.

What it can't do on Magento

  • No orders. It can't see Magento orders, so it won't answer "where's my parcel". Link it to your order-tracking page instead. Our post on where-is-my-order questions covers how to handle them.
  • No account or cart actions. It doesn't log customers in, change carts or apply coupons.
  • No live chat with a person. When it can't help, it offers a short form, and lead capture emails you the visitor's details.
  • Not on checkout, for the reason above.

Frequently asked questions

Do I need a Magento extension for an AI chatbot?

No. Magento 2 and Adobe Commerce have a Miscellaneous HTML box in the design configuration that adds a script to every page. Paste the chatbot's script there, save, and flush the cache. With no extension, there's nothing to keep compatible with Magento upgrades.

Does it work with Adobe Commerce cloud and Magento Open Source?

Yes. The admin path, Content, then Design, then Configuration, is the same on both. On cloud, remember to purge Fastly as well as flushing the Magento cache.

Will the chatbot slow my Magento store down?

The script loads with async, so the browser doesn't wait for it before drawing the page, and the chat window only loads when someone opens it. Magento's own JavaScript bundles are usually far larger.

Why doesn't the chatbot show on checkout?

Since Magento 2.4.7, payment pages enforce a strict content security policy that blocks scripts the store hasn't allowlisted. The rest of the storefront only reports violations, so the chat runs there. Keeping it off the payment page is usually a good thing.