✨ Train your first AI chatbot free — no credit card neededStart free →
Alee
← All tutorials
Tutorial · 7 min read

Embed the Alee Chat Widget on Any Website

Step-by-step guide to embed the Alee chat widget with one line of script, where to paste it, async loading, multiple bots, and testing the bubble.

Once your Alee bot is trained on your content, the last step is getting it live in front of visitors. That happens with a single line of script you paste into your site's HTML. This guide covers exactly where to find that snippet, where to paste it on the popular platforms, how the async loading keeps your site fast, how to run more than one bot, and how to test the bubble before you tell anyone about it.

What the embed snippet actually is

Alee gives you one <script> tag per bot. It loads a tiny loader file from Alee, which then injects the chat bubble (the friendly red pixel-cat launcher) into the bottom corner of your page. When a visitor clicks the bubble, the chat panel opens and connects to your trained "knowledge brain" so answers stay grounded in your content.

The snippet looks like this (your real one will carry your own bot ID):

```html
<script
src="https://aleeup.com/widget.js"
data-bot-id="YOURBOTID"
async>
</script>
```

A few things to know about that tag:

  • It is bot-specific. The data-bot-id (or equivalent identifier) ties the bubble to one particular bot and its knowledge, branding, and persona. Different bot, different snippet.
  • It is safe to expose. The ID in the snippet is a public embed key, not a secret. It only lets a visitor chat with the bot you configured. Your dashboard login, API keys, and lead data stay private.
  • It loads asynchronously. The async attribute tells the browser to fetch the script without blocking the rest of your page from rendering.

Step 1: Copy your snippet from the dashboard

  1. Sign in to Alee and open the bot you want to embed.
  2. Look for the embed or install section of that bot's settings (often labelled something like "Embed", "Install", or "Add to website").
  3. Copy the full <script> snippet shown there. Use the copy button rather than retyping it so you do not drop the bot ID.

Keep that snippet on your clipboard. Everything below is just about where it goes.

Step 2: Paste the snippet into your site

The rule for every platform is the same: the snippet should load on every page where you want the bubble to appear. The cleanest place is right before the closing </body> tag, or in a global "footer scripts" / "custom code" area that injects into every page. Here is where that lives on the common platforms.

WordPress

  • Simplest: install a "header and footer code" plugin (several free ones exist), then paste the snippet into the Footer / Body box. It will apply site-wide.
  • Theme route: in your block theme or a child theme, add the snippet to the footer template, or use the theme's built-in "custom code" / "footer scripts" field if it has one.
  • Avoid pasting it into a single post's content editor unless you only want the bot on that one post.

Shopify

  1. From the admin, go to Online Store → Themes.
  2. On your live theme, choose Edit code.
  3. Open theme.liquid and paste the snippet just before </body>.
  4. Save. The bubble now shows across your storefront.

Wix, Squarespace, Webflow, Framer, Ghost

  • Wix: use Settings → Custom Code, add a new snippet, set it to load on All pages, and place it in the Body - end location.
  • Squarespace: use Settings → Advanced → Code Injection and paste into the Footer box.
  • Webflow: open Project Settings → Custom Code and paste into the Footer Code box, then publish.
  • Framer: open Site Settings → General → Custom Code and paste into the End of `<body>` tag field.
  • Ghost: use Settings → Code injection and paste into the Site Footer box.

Plain HTML

Paste the snippet just before </body> in your template or on each page. If your site uses a shared include or partial for the footer, put it there once.

Linktree and link-in-bio pages

If your link-in-bio tool allows custom code or embeds, paste the snippet there. If it does not allow custom HTML, point your bio link to a simple page you control (even a basic one-page site) that carries the snippet, and the bubble will appear there.

Step 3: Why async loading matters

The async attribute is doing real work, so do not strip it out:

  • Your page renders first. The browser keeps building your page while it fetches the widget in the background, so the snippet does not slow down your content or hurt your load-speed scores.
  • The bubble appears a moment later. Because it loads independently, the launcher pops in shortly after the page is interactive. This is normal and expected.
  • A slow network never blocks your site. Even on a patchy mobile connection (common for India-heavy audiences), a slow widget fetch will not freeze the rest of the page.

You can place the snippet in the footer or the head; either works because it is async. The footer is the conventional, safe choice.

Step 4: Running multiple bots

There are two different scenarios people mean by "multiple bots", so handle them separately.

One bot per site (the common case).
Each site gets exactly one snippet, with that site's own bot ID. If you run three different websites, you embed three different snippets, one on each site. This is the clean setup and it is what most people want. Your plan's bot limit applies here: Free includes 1 bot, Pro includes 2, Agency includes 5, and Scale includes 10.

Two bots on the same page (rare).
Technically you can paste more than one snippet on a single page, but two bubbles competing for the same bottom corner is a poor experience. If you genuinely need different knowledge for different sections (say, a "sales" bot on landing pages and a "support" bot on docs), the better pattern is one bot per section of the site rather than two bubbles stacked on one page. When in doubt, use one bot per page.

Agencies running many client bots.
If you manage bots for clients, the Agency plan lets you run a roster of separate client bots from one dashboard, each with its own snippet, branding, and white-label badge removal. You embed each client's snippet on that client's site. See the features page for the full white-label rundown.

Step 5: Test the bubble before you announce it

Do not assume it worked. Run this quick checklist:

  1. Open the live page in a normal browser tab (not the editor preview, which sometimes strips custom scripts). A hard refresh helps if you had the page open already.
  2. Confirm the bubble appears in the corner. If your brand color and avatar are correct, the right bot loaded.
  3. Click it and send a real question that your content can answer. A grounded answer with sources means the brain is connected.
  4. Ask something off-topic to confirm it declines politely instead of making something up.
  5. Test on mobile. Open the site on your phone and check the bubble does not cover an important button or get cut off.
  6. Check a second page to confirm the bubble loads site-wide, not just on the page you edited.

A quick worked example

Say you run a gym site on WordPress and you trained a bot on your timetable PDF, your pricing page, and an FAQ you pasted.

  1. In Alee, open the gym bot and copy its snippet.
  2. In WordPress, paste it into your header-and-footer plugin's Footer box and save.
  3. Visit your live homepage in a fresh tab and hard-refresh. The red bubble appears bottom-right.
  4. Click it and ask "What are your Sunday timings?" You get the answer straight from the timetable PDF, with the source shown.
  5. Ask "Do you sell protein shakes?" If that is not in your content, the bot says it does not know rather than guessing.

That is a correct, live install.

Troubleshooting

  • No bubble appears. The snippet probably is not loading on that page. Confirm you pasted it into a site-wide footer/custom-code area, that you saved and (on Webflow/Framer) re-published, and that you are viewing the live site, not an editor preview.
  • Bubble appears but will not answer. Make sure the bot actually has knowledge sources added and finished processing. A brand-new bot with no sources has nothing to answer from.
  • Wrong branding shows up. You likely pasted the snippet for a different bot. Re-copy the snippet from the correct bot's settings and replace it.
  • "Powered by" badge showing. Badge removal is a white-label feature on the Agency and Scale plans. Check your plan on the pricing page.

For more setup walkthroughs, browse the rest of our tutorials and more guides. If you are weighing your options, see how we stack up on the Alee vs SiteGPT page.

Frequently asked questions

Will the embed snippet slow down my website?

No. The script loads asynchronously, so your page content renders first and the chat bubble appears a moment later in the background. Even on a slow mobile connection, a delayed widget fetch never blocks the rest of your page.

Can I put the same bot on more than one website?

Yes. The same snippet can be pasted on multiple sites and they will all talk to the same bot and the same trained knowledge. Keep in mind your plan's bot limit counts bots, not sites, so one bot reused across several domains still counts as one bot.

Is the bot ID in the snippet a security risk?

No. The ID in the embed snippet is a public key that only lets visitors chat with the bot you set up. It does not expose your dashboard login, your lead data, or any private keys, so it is safe to leave in your page source.

Ready to put a chat bubble on your site? [Start free](/signup) with Alee, train your bot, and paste the one-line snippet today.

Try it in your own Alee bot

Train it on your site, embed it anywhere, capture leads 24/7. Free to start, no card.

Keep learning