How to add an AI chatbot to your website

The chatbot widget puts a chat bubble on your website. Visitors can ask questions, and your AI Brain answers them right there. Every website chat also shows up in your Messenger inbox, so you can jump in and reply yourself.

Before you start

• Finish your brand setup so the AI knows your shop. See Set up the AI Brain.
• You need a website where you can paste a small piece of code (Shopify, WooCommerce/WordPress or your own site).
• Your role needs access to AI Brain. The chatbot uses the same permission. Owners and admins have it by default.

Steps

1. Design the widget

1. Go to Engage → Chatbot. The Chatbot Builder opens on the Appearance tab, with a live preview beside it.

   

2. Under Branding, enter a Widget name (up to 40 characters) and a Header subtitle. Add a Header logo and Bot avatar if you like (under 1MB each).
3. Pick your Colors, Shape & placement and Typography to match your store.
4. Click Save changes at the top. You'll see "Theme saved".

2. Choose how it behaves

1. Open the Behavior tab.
2. Under Chatbot status, keep Chatbot is live on. Turn on Hide on mobile if you don't want it on phones.
3. Set a Welcome message, for example "Hi there! Need help finding something?"
4. Add Quick-reply questions visitors can tap, like "What are your shipping times?"
5. Optional: set Proactive opening, Sound & typing, Availability (an away notice outside business hours), Conversation options, a Privacy notice, and Lead capture to ask for name and email.
6. Under Access control, choose whether the AI may Place orders, Cancel orders and Edit customer info. These apply to all your channels, not only the widget.

   

7. Click Save changes.

3. Add your website address

1. Open the Domains tab and click Add a domain.
2. Type your site in Base URL, for example https://yourstore.com.
3. Under Pages, keep * to show the chatbot on every page, or add paths like /products. A path ending in *, like /blog/*, covers everything under it.

   

4. Click Save changes. The Install tab unlocks once you've saved and added at least one domain.

4. Publish and install

1. Open the Install tab.
2. Click Publish. You'll see "Widget published — your live snippet is up to date".
3. Under Embed snippet, click Copy.

   

4. Paste the snippet into your website, just before the closing </body> tag:
   • Shopify: Online Store → Themes → Edit code → open theme.liquid → paste just before </body>.
   • WooCommerce / WordPress: Appearance → Theme File Editor → footer.php (or use a header/footer plugin) → paste just before </body>.
   • Custom site: paste it before </body> on every page where you want the chatbot.
5. Open your website. The chat bubble appears in the corner you chose.

5. Reply from Messenger

1. Go to Engage → Messenger and pick the Website chat inbox.
2. Open a visitor's chat to read it or reply. Your reply shows up in the visitor's widget. Replying yourself pauses the AI in that chat until you click Resume AI.

Tips

• Changing the design later? Edit, click Save changes, then go to Install and click Publish changes. Your website only shows the published version, and you don't need to paste the snippet again.
• Your design draft is saved in the browser you're using. Publish from the same browser where you made your changes.
• The widget replies in plain text. Product photos and carousels aren't shown inside it.
• Website chats don't have the 24-hour reply limit that Facebook, Instagram and WhatsApp have.
• Turn on Remember conversation (under Conversation options) so a visitor's chat is still there when they come back.

Troubleshooting

The Install tab is locked

Hover over it to see why: "Save your chatbot config first to get the install snippet" or "Add at least one allowed domain in the Domains tab to get the install snippet". Do that, then try again.

"Add at least one allowed domain before publishing."

Add your website in the Domains tab, click Save changes, then Publish again.

"Publish your changes to activate this snippet before copying it."

The Copy button stays off until you publish. Click Publish first.

The chat bubble doesn't show on my site

• Check the address in Domains matches your site exactly. yourstore.com and www.yourstore.com are different, so add both if your site uses both.
• Check the page is in Pages (or use *).
• Make sure Chatbot is live is on, and Hide on mobile is off if you're testing on a phone.
• Did you regenerate the key? The old snippet stops working. Copy the new one and replace it on your site.
• Make sure you clicked Publish changes after your last edit.

The AI doesn't answer website visitors

Check that someone hasn't taken over the chat in Messenger (click Resume AI), and that your plan's AI message allowance isn't used up.

"Regenerate the install key? Any snippet you've already pasted on your site will stop working until you replace it."

This appears when you click Regenerate key. Only do it if your key has leaked. Afterwards, copy the new snippet and replace the old one everywhere it's installed.

For developers

Embed snippet

The widget is one script tag. Always copy the real snippet from the Install tab. It has your organization's key and the correct EcomUp address.

<script src="https://<ecomup-widget-host>/widget/loader.js" data-ecomup-key="wgt_live_xxxxxxxxxxxxxxxxxxxxxxxx" async></script>

Part	What it does
src	The loader script. It works out the EcomUp API address from its own URL, so don't copy the file to your own server.
data-ecomup-key	Your public install key: wgt_live_ followed by 24 characters. Without it, the loader logs [ecomup] missing data-ecomup-key on the widget script tag in the browser console and does nothing.
async	Loads without slowing your page down.

How the loader behaves

• It loads only once per page, even if the tag appears twice.
• It fetches the published configuration only. Drafts never reach your live site.
• The widget is drawn inside a Shadow DOM, so your site's CSS can't change it and its CSS can't change your site.
• It checks the allowed domains and pages on every route change, including single-page apps that use history.pushState. It hides itself on pages that aren't allowed.
• The key is public by design (anyone can see it in your page source). The allowed-domain list is what stops it from showing elsewhere. If you think it's being misused, click Regenerate key.
• If something fails, the loader writes a warning starting with [ecomup] to the browser console, for example [ecomup] widget not loaded: ….

Related articles

• Set up the AI Brain
• Use the Messenger inbox
• Take over a chat from the AI
• Add custom code to your store
• Developer overview