Skip to content
HELP CENTER/INSTALLATION

How to install the assistant on your website

Copy one snippet and paste it into your site. Step-by-step for Webflow, WordPress, Shopify, Wix and more.

Once your assistant is set up, installing it is just pasting a small snippet into your website. Here's the code, the per-platform instructions, and how to check it works.

In the side menu, under Channels, open Website and, in the Install on your website section, copy the whole Embed code block (Copy button). It is two <script> tags, like this:

<script>window.ChatME={chatbotId:"YOUR_CHATBOT_ID",mode:"popup",baseUrl:"https://app.chatme.es"}</script>
<script
  src="https://app.chatme.es/widget/chatbot.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-mode="popup"
  data-base-url="https://app.chatme.es"
  data-no-optimize="1"
  data-no-defer="1"
  async
></script>

Paste both tags together, exactly as they are, just before the closing </body> tag on every page where you want the assistant to appear.

The code follows the Widget mode saved in Appearance, which is where it's chosen, with its live preview; above the code you'll see which one it is, for example "Mode: Popup · change it in Appearance". If you choose Inline, the code says inline instead of popup and doesn't go before </body>: paste it inside a block of its own (an HTML or Embed block in your site editor, or a <div>), at the spot on the page where you want the assistant; it appears inside that block.

If the code is already on your site and you change the mode in Appearance:

  • From Popup to Inline: the change shows on your site straight away, without touching anything, at the bottom of the page (where the code is pasted, before </body>). Copy the new code and paste it in a block of its own where you want the assistant.
  • From Inline to Popup: an Inline code already on your site stays inline until you replace it. Copy it again and replace the old one.

Don't remove any line; each one has a job:

  • window.ChatME repeats your assistant's ID on a line of its own. If an optimisation plugin merges your site's scripts into one file, this line survives and the assistant still knows which one it is.
  • data-no-optimize="1" and data-no-defer="1" ask LiteSpeed Cache not to combine or delay this script. WP Rocket and Autoptimize don't read these attributes; in those, exclude chatme in the plugin's JavaScript settings.

Option 2: iframe

If your site builder won't let you paste scripts but does accept an iframe (an HTML or Embed block that takes <iframe> code), use the iframe. In Website → Install on your website, choose <iframe> under Embed type and copy the Embed code (Copy button). It looks like this (it's an example; always copy the one from your dashboard):

<iframe
  src="https://app.chatme.es/widget/embed/YOUR_CHATBOT_ID?mode=popup"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  style="border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.12);"
></iframe>

The iframe is self-contained and needs no extra configuration; adjust the width (width) and height (height) to suit your page. It always shows the chat inside its box, even if Appearance is set to "Popup": paste it wherever you want it to appear on the page.

If your site doesn't accept code (Canva and similar)

Some website builders let you paste neither scripts nor iframes; sites made with Canva, for example. There the assistant can't sit inside the page, but you can link to it with a button:

  1. In Website, on the Your customer link card, copy your link (app.chatme.es/c/…).
  2. In your builder, add a button or a piece of text, for example "Ask our assistant", and give it that link. In Canva: select the element → More (…) → Link → paste the link.
  3. Publish your site again so the button works.

In Canva a button can't float on the screen: add it to the sections people see most, such as the top section and the contact section. If your site already has a WhatsApp or Instagram button, you can also connect WhatsApp or Instagram to the assistant (Pro and E-commerce plans), so it answers there without touching your site. More ideas for your link in Share your direct link.

Per-platform instructions

These locations are for Popup. With Inline, use an HTML/Embed block on the page where you want the chat.

PlatformWhere to paste the snippet
WebflowProject Settings → Custom Code → Footer Code, then publish
WordPress"Insert Headers and Footers" or "WPCode" plugin → Body / before </body>
ShopifyOnline Store → Themes → Edit code → theme.liquid, before </body>
WixSettings → Custom Code → Add Custom Code → "Body - end" location
SquarespaceSettings → Advanced → Code Injection → Footer
FramerProject Settings → General → Custom Code → End of body tag
Static HTMLIn each page's <body>, just before </body>

On WordPress, avoid pasting it directly into footer.php — a theme update could overwrite it. Use a scripts plugin instead.

Allowed domains

By default the assistant works on any domain. To limit it to your site (so nobody can copy your snippet onto another site), add your domains in Website → Install on your website → Allowed domains and click Save:

mybusiness.com, www.mybusiness.com, app.mybusiness.com

Leave it blank to allow all domains.

The list applies to the script code. The iframe and your customer link work on any site.

Check that it works

  1. Open your site in the browser (avoid incognito to dodge cookie issues).
  2. Wait 2–3 seconds for the script to load.
  3. You'll see the floating bubble in the bottom corner (or wherever you set it). With Inline, the chat appears inside the block where you pasted the code.
  4. Click it, type a question and confirm it answers.

If the assistant doesn't show

The most common cause, especially on WordPress, is a plugin that optimises JavaScript (LiteSpeed Cache, WP Rocket, Autoptimize and the like). These plugins can merge your site's scripts into one file; many sites have that option switched on (sometimes the hosting provider switches it on). When they do, they can lose the tag that carries your assistant's ID: the assistant doesn't appear and the page shows no error. In the browser console (F12 → Console) you'll see a warning that starts with [Chatbot] No chatbot id found.

How to fix it:

  1. Copy the code from Website → Install on your website again and replace the one on your site. The current code already has the window.ChatME line and the data-no-optimize="1" and data-no-defer="1" attributes; if you pasted yours a while ago, it may not.
  2. Purge the optimisation plugin's whole cache and reload the page.
  3. If you use WP Rocket or Autoptimize, or if it still doesn't show, exclude chatme from JavaScript optimisation in the plugin's settings (combine, defer or delay JS) and purge the cache again. Only LiteSpeed Cache reads the data-no-optimize and data-no-defer attributes.

Other checks:

  • Open the browser console (F12 → Console) and look for errors in red or warnings that start with [Chatbot].
  • Check the snippet is in <body> and not in <head>.
  • Confirm the data-chatbot-id is correct (copy it again from the dashboard).
  • If you restricted domains, make sure the current domain is on the list (including www. if you use it).
  • Other caches (W3 Total Cache, Cloudflare) can also serve an old version of the page — purge the cache after pasting the snippet.

Still not seeing it?

Open the ChatME Assistant in your dashboard and paste the console error — it'll help you diagnose it. You can also start with the getting-started guide if you haven't finished setting it up yet.

Was this article helpful?
NEED MORE HELP?

Ask the ChatME Assistant

It's in your dashboard and knows every step. Or book a demo and we'll set it up with you.