Chatbot on a WordPress site: 2026 install guide

A chatbot is usually added to a WordPress site with a single script: a short snippet of code. You can place it in the theme head field, a header-script plugin, or an Elementor HTML block. In Aihio, you first build the chatbot from your own website content and then copy the embed code to WordPress, much like adding an analytics or consent script. The key is to place the code somewhere that loads on every page where the chatbot should appear. Also check your consent settings, site caching, mobile layout, and any Content Security Policy (CSP), a browser security rule that can block external scripts. A free Aihio account is enough for the first trial, so you can test the install before choosing a paid plan. A good test covers the site on both desktop and mobile, plus at least three real customer questions. If you use a cookie banner, test both accepted and rejected consent. That way you find problems before your customers do. This guide walks through the install options without coding: what the code does, how to test the chatbot before launch, and what to do if the widget does not appear.

Fastest path: for WordPress sites there is an official Aihio Chatbot plugin that links your chatbot in one click, with no code. See the WordPress plugin guide. This guide covers the manual install, which works on any publishing system.

Before you start

You’ll need:

• Admin access to WordPress
• An Aihio account (the free tier is enough)
• Your brand colours ready (primary plus text colour for the chatbot)

Sign in to Aihio and enter your website address. The AI reads your site content and builds a knowledge base: the material the chatbot draws its answers from. This takes anywhere from a few seconds to a minute or two depending on site size. Once the knowledge base is ready, go to Settings → Embed and copy the code.

It looks like this:

<script>
  window.AihioWidget =
    window.AihioWidget ||
    function () {
      (window.AihioWidget.q = window.AihioWidget.q || []).push(
        [].slice.call(arguments),
      );
    };
  AihioWidget('init', { chatbotId: 'your-chatbot-id' });
  (function () {
    var s = document.createElement('script');
    s.async = true;
    s.src = 'https://aihio.ai/widget/aihio-loader.js';
    document.head.appendChild(s);
  })();
</script>

Path 1: Add the code to your theme (most direct)

On a standard WordPress install there are two ways to do this.

Option A: Appearance → Customize → Additional settings → Header code

If your theme allows head edits through the customizer (most modern themes do), use it. You add the code once, and it survives theme updates.

1. Open Appearance → Customize

   Click “Customize” in the top bar. Find “Additional settings” or “Custom Code” in the menu. The exact label varies by theme.

2. Paste the code into the head field

   Open “Head” or “Header scripts” and paste Aihio’s <script> snippet. Save.

3. Reload the site and test

   Open your site and wait a few seconds. The chat window appears in the bottom-right corner.

Option B: A plugin like “Insert Headers and Footers”

If your theme doesn’t expose a head edit, install a free plugin like Insert Headers and Footers (WPCode) or Head, Footer and Post Injections. Paste the Aihio code into the plugin’s “Header” field.

Path 2: Elementor + Custom HTML

If your site is built with Elementor, you can add the chatbot to a single page or to the whole site.

1. One page only

   Edit the page in Elementor, drop in an “HTML” widget, and paste the code. The chatbot shows only on this page.

2. Globally across the site

   Elementor Pro users: go to Templates → Theme Builder → Header, open the header template, and add an HTML widget inside the header. The code now runs on every page.

Path 3: Plugin-based installation

If your theme does not make header scripts easy, use a general header-script plugin such as WPCode or Head, Footer and Post Injections. This is usually safer than editing theme files directly, because the snippet stays in place when the theme updates. Keep an eye on the changelog for new WordPress-related releases.

Which install path should you choose?

Pick the path based on who maintains the site and where the chatbot needs to appear.

For most small business sites, a header-script plugin is the natural choice. It doesn’t require editing theme files, and you can remove the code later from the same place.

GDPR and consent

The chatbot stores a couple of keys in the browser’s local storage: the conversation ID and the session state. These are not cookies, but depending on your implementation and context they may still count as online identifiers. Check this in your organisation’s DPIA, the data protection impact assessment. Many consent platforms still treat every third-party script the same way.

Working with Cookiebot, Complianz, and others

Most Finnish WordPress sites manage consent with Complianz or Cookiebot. Both can load a script conditionally:

If you decide the chatbot needs consent, gate the loader behind consent like this:

<!-- Complianz: wait for consent before loading -->
<script type="text/plain" data-category="functional">
  window.AihioWidget =
    window.AihioWidget ||
    function () {
      (window.AihioWidget.q = window.AihioWidget.q || []).push(
        [].slice.call(arguments),
      );
    };
  AihioWidget("init", { chatbotId: "your-chatbot-id" });
  (function () {
    var s = document.createElement("script");
    s.async = true;
    s.src = "https://aihio.ai/widget/aihio-loader.js";
    document.head.appendChild(s);
  })();
</script>

Test that the chatbot really appears after the visitor accepts cookies. Complianz sometimes needs a page reload.

Common problems

”The chatbot doesn’t show up at all”

Check the browser dev tools first: press F12 and open the Console tab.

• Do you see a 404 aihio-loader.js error? The script URL is mistyped, blocked by a browser extension or firewall, or unavailable at the requested path.
• Do you see a CSP blocked error? Your site has a Content Security Policy that blocks third-party scripts. Add aihio.ai to the exceptions.

”The chatbot responds slowly”

The first reply can take 2–5 seconds while the AI processes the question. If you’re waiting more than 10 seconds, check the knowledge base size in the admin panel. A knowledge base over 1 000 pages slows answers down.

”The chatbot asks the visitor to sign in”

The site’s CSP setting can block an external script or connection. You manage publishing in Aihio’s chatbot settings, and visitors never need to sign in on your site.

Test before going live

Once the code is in, do this before you publish:

1. Open the site in an incognito window

   That way you see exactly what a regular visitor sees. Don’t test while signed in as admin.

2. Wait 3–5 seconds

   The chat window should finish loading in that time. If it doesn’t appear, open the Console tab in dev tools.

3. Ask a test question

   Ask the chatbot something from your site content, such as opening hours or contact details. A correct answer should arrive in a few seconds.

4. Check the mobile view

   Open the site on your phone. The chat window scales to mobile automatically, but it must not cover important content or call-to-action buttons.

Frequently asked questions

Install done

Once the code is on your site and the test question works, the chatbot is live. Watch the feature overview for analytics-related guidance, and review the first week of conversations: which questions repeat, where the chatbot can’t answer, and what is still missing from the knowledge base.

Create a free chatbot and embed it on your WordPress site.