How to add an AI chatbot to your WordPress site
You do not need a chatbot plugin to maintain. Owlbee runs from one snippet, and the safest way to add it to WordPress is the header and footer code tool many sites already use. It takes about five minutes.
Before you start
- A trained Owlbee chatbot. Build one from your website in a few minutes.
- Your snippet, from Get Embed Code on the chatbot's page in your dashboard.
- An Administrator login for your WordPress site. Other roles cannot add scripts.
- On WordPress.com, any paid plan with hosting features turned on. The free plan removes scripts.
Method 1: a header and footer plugin (recommended)
This works with any theme or page builder, survives theme updates and keeps your code in one place.
-
Install the plugin
In your WordPress dashboard go to Plugins, then Add New Plugin. Search for WPCode (listed as "WPCode - Insert Headers and Footers"), then install and activate it. Any reputable header and footer code plugin works the same way.
-
Open the footer box
Go to Code Snippets, then Header & Footer.
-
Paste your Owlbee snippet
Paste the snippet into the Footer box and click Save Changes.
<div id="chatbot-YOUR-EMBED-CODE"></div> <script src="https://owlbee.ai/static/js/chatbot-embed.js"></script> <script> ChatbotEmbed.init({ embedCode: 'YOUR-EMBED-CODE', apiUrl: 'https://owlbee.ai/api/chat/YOUR-EMBED-CODE', containerId: 'chatbot-YOUR-EMBED-CODE', title: 'Ask us anything' }); </script> -
Check your site
Open your site in a private window. The chat button appears in the bottom corner of every page. If you use a caching plugin, clear its cache first.
Method 2: one page only, with a Custom HTML block
Use this if you want the chatbot on a single page, such as your contact or pricing page.
-
Edit the page
Open the page in the block editor while logged in as an Administrator.
-
Add a Custom HTML block
Click +, search for Custom HTML and paste your snippet into the block.
-
Update and check
Click Update and view the live page.
Why not edit footer.php?
Pasting code into your theme's files works, but a theme update can overwrite it, a typo can take the site down, and many hosts switch the file editor off. Block themes have no footer.php at all. A header and footer plugin avoids all of this.
Make it a great WordPress chatbot
When you build your chatbot from your WordPress site's address, Owlbee reads your key pages, such as home, about, services, pricing, FAQ and contact, and drafts the chatbot for you. Running WooCommerce? Owlbee recognizes WooCommerce stores and samples products from across your catalogue. See AI chatbots for online stores.
Add PDFs, price lists or a product export for anything that is not on your pages, and switch on appointment booking if you sell through calls.
If the chat button does not appear
- Clear your caching plugin and any CDN cache, then reload in a private window.
- Some optimization plugins delay or combine scripts. Exclude
chatbot-embed.jsfrom their JavaScript delay and minify settings. - Make sure the whole snippet was pasted, including both
<script>tags. - Check that your chatbot is trained and your plan is active.