How to Add an AI Chatbot to WordPress with Alee

Adding an AI chatbot to your WordPress site with Alee takes one line of code and no plugins to write. You train a bot on your own content, copy a single <script> snippet, and paste it into WordPress so a chat bubble appears on every page. This guide covers all three ways to install the snippet, plus the gotchas with Gutenberg, Elementor, and caching that trip people up.

What you need before you start

You only need two things:

• A WordPress site you can edit (self-hosted WordPress.org, or a Business/Commerce plan on WordPress.com that allows custom code and plugins).
• An Alee bot with at least one knowledge source added, so it has something to answer from. If you have not built one yet, start free and add a source.

Note on WordPress.com: free and Personal plans do not allow arbitrary scripts or plugins, so the snippet will not run there. Self-hosted WordPress (the wordpress.org kind, on your own hosting) has no such limit.

Train your bot first

The chat bubble is only as good as what it knows. In Alee, open your bot and go to its sources area to add knowledge before you embed:

1. Open the bot's Sources tab and click to add a source.
2. Add any combination of: a single website URL (Alee crawls that page), a full sitemap to ingest many pages at once, PDFs or documents, a YouTube video (it uses the transcript), or raw text and FAQ you paste in.
3. Wait for Alee to finish processing. Behind the scenes it splits your content into chunks, turns each into a vector embedding, and stores them in the bot's knowledge brain.
4. Send a few test questions in the Alee preview to confirm answers are grounded and cite your content. If the answer is not in your sources, the bot says it does not know rather than making something up.

You can re-crawl or add more sources any time, and the brain grows. Now grab the snippet.

Get your Alee embed snippet

Every Alee bot has an embed snippet. In the dashboard, open the bot you want to install and look for its Embed or install option. You will see a single line that looks roughly like this:

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

Copy the whole line exactly. The data-bot value ties the widget to your specific bot, so do not edit it. Before you install, this is also the moment to set up how the bubble looks and behaves, since those settings live with the bot, not in the snippet.

Customize the bubble before (or after) you embed

All of these are configured in Alee, and they update live without you touching WordPress again:

• Bot display name shown in the chat header.
• Brand color for the bubble and accents (match your theme).
• Avatar / launcher image for the floating button.
• Welcome message that greets visitors when they open the chat.
• Suggested starter questions so people know what to ask.
• Bot persona / system prompt to set tone and rules.

Because these are server-side, you can tweak them later and the change shows up on your live WordPress site instantly — you never re-paste the snippet to restyle the bubble.

Method 1: Paste it into your theme footer (recommended)

Putting the snippet in the footer makes the bubble appear site-wide and loads it after your content, which is best for performance. Do not edit raw theme files directly, because a theme update will wipe your change. Use one of these safe routes instead.

Using your theme's built-in code area (if it has one):

1. In WordPress admin, go to Appearance → Customize.
2. Look for a section like Footer Code, Custom Code, or Additional Scripts (Astra, GeneratePress, Kadence, OceanWP, and many others include this).
3. Paste the Alee snippet into the footer/body-end field.
4. Publish, then open your live site and confirm the red chat bubble appears.

If your theme has no such field, use Method 2.

Method 2: Use a header-and-footer plugin (works on any theme)

This is the most reliable route and survives theme changes. Any of the popular insert-scripts plugins work: WPCode, Insert Headers and Footers (by WPBeginner), or Header Footer Code Manager.

1. Go to Plugins → Add New, search for one of the above, then Install and Activate it.
2. Open the plugin's settings. You will see boxes for Header, Body, and Footer.
3. Paste the Alee <script> line into the Footer box (the body-close section).
4. Save. If the plugin has an enable/active toggle for the snippet, switch it on.
5. Visit your live site to confirm the bubble loads.

WPCode users: create a New Snippet → HTML Snippet, paste the code, set Location to Site Wide Footer, set the snippet to Active, and save. This also lets you scope the bubble to specific pages later if you ever want to.

Method 3: Drop it into a Custom HTML block (single page or post)

Use this when you only want the chatbot on one page, like a pricing or contact page, rather than the whole site.

1. Edit the page or post in the block editor (Gutenberg).
2. Click the + to add a block and choose Custom HTML.
3. Paste the Alee snippet into the block.
4. Update / Publish the page.

Gutenberg notes

The Custom HTML block runs your script when the page loads, so the bubble appears on that page only. The editor preview may show a "HTML block" placeholder rather than the live bubble, which is normal. Click Preview → Preview in new tab to see it actually render. The block editor will not strip the <script> tag the way the classic editor's visual mode sometimes does, so Custom HTML is the right block to use.

Elementor notes

If you build pages with Elementor, you have two clean options:

• Per page: drag an HTML widget onto the page and paste the snippet inside it. The bubble shows on that page.
• Site-wide via Elementor: if you use Elementor Pro, add the snippet under Elementor → Custom Code (or Site Settings → Custom Code) and set it to print before </body> across the whole site.

Either way, Elementor's live editor often will not render the bubble inside the canvas, so always check the published page in a normal browser tab.

Worked example: a coaching site on Astra

Say you run a fitness coaching site on the Astra theme and want the bot on every page:

1. In Alee, add your services page URL and a PDF of your program FAQ as sources, set the brand color to match your site, write a welcome message ("Hi! Ask me about plans, pricing, or booking a call"), and add three starter questions.
2. Copy the embed snippet from the bot's install option.
3. Install WPCode, create an HTML snippet, paste the line, set it to Site Wide Footer, mark it Active, and save.
4. Clear your cache and load the homepage in an incognito tab. The red bubble appears bottom-right, opens with your welcome message, and answers "What plans do you offer?" using your sources with a cited answer.

A few minutes, no developer needed.

Verify it works and capture leads

Once the bubble is live, do a real test from an incognito window so caching and login state do not fool you:

• Open the chat and ask a question you know is covered. You should get a grounded answer with sources. Repeat or similar questions come back instantly because Alee serves them from cache.
• Ask something off-topic. The bot should say it does not know instead of guessing.
• If you want to collect contacts, turn on lead capture in Alee so the chat asks for name, email, or phone, and push those leads to a CRM, Google Sheet, or email via a webhook (or automate with n8n). Watch them land under the bot's analytics, alongside conversations, messages, lead-rate, and a Top Questions list.

To remove the "Powered by" badge and run a fully white-labelled bubble, you will need a paid plan; see pricing for which tier unlocks white-label.

Troubleshooting

• Bubble does not appear. Clear your WordPress cache and your CDN / Cloudflare cache after pasting the snippet. Caching plugins like WP Rocket or W3 Total Cache serve the old HTML otherwise. Hard-refresh or use an incognito tab.
• Script optimizer ate it. Aggressive "optimize / combine / defer JavaScript" settings can break the embed. Exclude aleeup.com (or embed.js) from JS minification, deferral, and delay-until-interaction.
• It vanished after a theme switch. It lived in the old theme's footer field. Re-paste it via Method 2 (a plugin) so it is theme-independent.
• Two bubbles showing. You pasted the snippet in two places (for example both a theme field and a plugin). Remove one.
• WordPress.com Personal/Free plan. Custom scripts are blocked on those tiers; upgrade to a plan that allows custom code, or move to self-hosted WordPress.

For walkthroughs on other site builders, browse our tutorials and more guides, or see the full features list.

Frequently asked questions

Will the Alee chatbot slow down my WordPress site?

No. The snippet is a single async script, so it loads in the background without blocking your page, and the chat bubble only fully loads when a visitor interacts with it. Placing it in the footer keeps your content rendering first.

Do I need a plugin to add Alee to WordPress?

Not necessarily. If your theme has a footer or custom-code field, you can paste the snippet there directly. A header-and-footer plugin like WPCode is just the most reliable, theme-independent option, especially if you switch themes later.

Can I show the chatbot only on certain pages?

Yes. Use a Custom HTML block (or an Elementor HTML widget) on just the pages you want, instead of installing it site-wide. Plugins like WPCode also let you set page-level rules for where a snippet loads.

Ready to put a smart, on-brand chatbot on your WordPress site? [Start free with Alee](/signup) and have your bubble live in minutes.