How to Add an AI Chatbot to Your WordPress Site in 2 Minutes

TL;DR: To add an AI chatbot to WordPress in about 2 minutes, copy your bot's embed code and paste it before the closing body tag in footer.php, or use the Insert Headers and Footers plugin so you never touch theme files. Elementor, Divi, and Gutenberg each have an HTML block for the same snippet. Clear your caching plugin and CDN afterwards, then verify in an incognito window.

WordPress powers over 40% of websites worldwide, making it the most common platform for AI chatbot deployment. Here's exactly how to add an AI chatbot to your WordPress site.

Method 1: Theme Header/Footer (Recommended)

This is the simplest method and works with every WordPress theme.

Step 1: Get Your Embed Code

Log into your chatbot platform dashboard and navigate to your bot's "Install" tab. Copy the embed code - it looks something like this:

<script src="https://chatonbo.com/widget/chatonbo-widget.js"
        data-bot-id="your-bot-id"
        data-api-url="https://chatonbo.com/api">
</script>

Step 2: Add to WordPress

Go to Appearance → Theme File Editor (or Appearance → Theme Header/Footer if your theme supports it).

Find the footer.php file and paste the embed code just before the closing tag.

Alternatively, use a plugin like Insert Headers and Footers (by WPBeginner) to add the code without editing theme files directly.

Step 3: Clear Cache

If you're using a caching plugin (WP Super Cache, W3 Total Cache, LiteSpeed Cache, WP Rocket), clear your cache so the new code takes effect. Also clear any CDN cache (Cloudflare, etc.).

Step 4: Verify

Visit your website in an incognito/private window. The chatbot widget should appear in the bottom-right corner.

Method 2: Page Builders

Elementor

Add an HTML widget to your site's footer template. Paste the embed code.

Divi

Use the Code Module in your footer section. Paste the embed code.

Gutenberg

Add a Custom HTML block in your site's footer pattern. Paste the embed code.

Troubleshooting

Chatbot doesn't appear

• Clear your browser cache and WordPress cache
• Check if any minification/optimization plugins are blocking the script
• Verify the embed code is placed before , not inside

Chatbot appears on admin pages

• The script loads on all pages. If you only want it on the frontend, wrap it in a condition or use a plugin that supports conditional loading.

Performance concerns

The chatbot script is lightweight (under 30KB gzipped) and loads asynchronously. It won't affect your Core Web Vitals or page load speed.

Caching issues after updates

When the chatbot widget is updated, WordPress caching plugins may serve the old version. Add a version parameter to bust the cache, or configure your caching plugin to exclude the chatbot script from minification.

Looking for the best AI chatbot for your WordPress site? See our AI chatbot for WordPress solution for lead capture, support automation, and more.