How to Add a Chatbot to WordPress: 3 Easy Methods

The easiest way to add a chatbot to WordPress is to paste the chatbot's one-line script into your site's footer with a free code plugin such as WPCode. You don't touch your theme files, the code survives theme updates, and it takes about five minutes. This guide walks through that method and two alternatives.

The examples use Helovo, but the methods work for any chatbot that installs with a script tag.

Before you start: set up your chatbot

The chatbot itself should be ready before you add any code. With Helovo that means:

1. Create a free account and add a new chatbot.
2. Describe your business: prices, delivery and return terms, contact details and opening hours.
3. Pick the chat window's colour, avatar and welcome message.
4. Test it in the dashboard with a few realistic questions.

For the details of each step, see our guide to adding a chatbot to your website.

Get your code and allow your domain

On the chatbot's Install screen, first add the domain it will run on, for example bloomandstem.co.uk. The chatbot only opens on sites you allow, so even if someone copies your code, it won't work on their site.

Then you get a line of code like this:

<script src="https://api.helovo.com/widget.js" data-bot="pk_…" async></script>

It needs to be on every page of your site, just before the closing </body> tag. There are three ways to do that in WordPress.

Method 1: the WPCode plugin (recommended)

WPCode (formerly "Insert Headers and Footers") is one of the most widely used code plugins for WordPress, and the free version is all you need.

1. In your WordPress admin, go to Plugins → Add New.
2. Search for WPCode, click Install Now, then Activate.
3. Open Code Snippets → Header & Footer in the left menu.
4. Paste the chatbot code into the Footer box.
5. Click Save Changes.

Open your site in a new tab and you should see the chat button in the bottom-right corner. If you don't, see "If the chatbot doesn't show up" below.

Why this method? The code lives outside your theme, so the chatbot keeps working when you update or change themes.

Method 2: your theme's footer.php

If you'd rather not install a plugin and you use a classic (non-block) theme, you can add the code to the theme:

1. Go to Appearance → Theme File Editor.
2. Open footer.php from the file list on the right.
3. Find the </body> line near the end and paste the code just above it.
4. Click Update File.

Two downsides: a theme update can wipe the change, and block themes (such as Twenty Twenty-Four) don't have a footer.php. If you edit your theme, use a child theme, or go with Method 1.

Method 3: Elementor Pro

If your site is built with Elementor Pro, you can use its custom code feature:

1. Go to Elementor → Custom Code and click Add New.
2. Paste the code and choose </body> - End as the location.
3. When publishing, set the condition to Entire Site.

The free version of Elementor doesn't have this feature; use Method 1 instead.

Tips for WooCommerce stores

Setup is the same on WooCommerce; the code runs across your whole store. When writing your chatbot's information, include:

• Your carrier, delivery times and free shipping threshold
• Return and exchange terms and steps
• Payment options and whether you ship internationally
• Where customers can track their orders

The chatbot doesn't connect to your WooCommerce orders; when someone asks "Where's my order?", it points them to your tracking page or to you.

If the chatbot doesn't show up

• Clear your cache: if you use a caching plugin such as LiteSpeed Cache, WP Rocket or W3 Total Cache, clear it after adding the code.
• Check JavaScript delay settings: some speed plugins hold scripts back until the visitor interacts with the page ("Delay JavaScript execution"). If the chat button appears late, add widget.js to that setting's exclusion list.
• Check the domain: www.yoursite.com and yoursite.com are different addresses. Check which one your site opens on and add it in Helovo; add both if you're not sure.
• Is the chatbot "Active"? A draft or paused chatbot doesn't appear on your site.
• Browser console: press F12 and open the Console tab. Warnings starting with "[Helovo]" usually tell you exactly what's wrong.

Will a chatbot slow down my site?

The script loads with async, so it doesn't hold up your page: your content loads first and the chat button follows.

After you go live

Check the Conversations page in your dashboard every day for the first week:

• Conversations handed to you show questions the chatbot couldn't answer. Add that information to its instructions.
• Recurring unexpected questions may point to something missing from your website.

After a few weeks of small improvements, the chatbot will answer most of your customers' questions on its own.

Frequently asked questions

Should I use a WordPress chatbot plugin or a script?

Both work. A script keeps the chatbot independent of WordPress: you can use the same chatbot on several sites, and if you ever move off WordPress, you just move the line of code.

Does it work on WordPress.com?

It works on self-hosted WordPress (WordPress.org). On WordPress.com, adding code and plugins is only possible on plans that allow plugins, so check what yours includes.

Can I show the chatbot on some pages only?

WPCode's free Header & Footer box adds the code to every page. To limit it to certain pages, use the plugin's conditional snippets or Elementor Pro's display conditions.

How much does it cost?

With Helovo, setting up and testing your chatbot is free; you subscribe when you want it to talk to visitors on your site. See the pricing page, or read our guide to chatbot pricing for how the different models compare.