Chatbot on a WordPress site — 2026 install guide

A chatbot on a WordPress site is usually added with one script that you place in the theme head field, a header-script plugin, or an Elementor HTML block. In Aihio, you first build the chatbot from your website content and then copy the embed script to WordPress, much like adding analytics or consent tooling. The key is to place the code somewhere that loads on every page where the chatbot should appear. You should also check consent settings, caching, mobile layout, and any Content Security Policy before launch. A free Aihio account is enough for the first test, so you can verify the setup before choosing a paid plan. A good test includes desktop, mobile, real customer questions, and both accepted and rejected consent states. This guide shows the practical install options without coding and explains what to check if the widget does not appear.

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 paste your website URL. The AI crawls your site and builds a knowledge base, which takes anywhere from a few seconds to a minute or two depending on site size. Once it’s 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 supports 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 globally.

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 remains in place when the theme updates. Keep an eye on the changelog for product updates.

GDPR and consent

The chatbot stores a couple of keys in the browser’s local storage (conversation ID and session state). These are not cookies, but they may still be treated as online identifiers under GDPR depending on your implementation and legal assessment — check this with your DPIA. Even so, many consent platforms treat every “third-party script” the same way.

Working with Cookiebot, Complianz, and others

Most Finnish WordPress sites use Complianz or Cookiebot for consent. Both support conditional script loading:

If you decide the chatbot needs consent, wrap the loader in a consent component:

<!-- 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 actually appears after the user accepts cookies. Complianz sometimes needs a page reload.

Common problems

”The chatbot doesn’t show up at all”

Open the browser dev tools (F12 → Console):

• 404 aihio-loader.js: the script URL is mistyped, blocked by a browser extension/firewall, or unavailable at the requested path.
• CSP blocked: 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 admin panel for the knowledge base size. A knowledge base over 1 000 pages slows answers down.

”The chatbot asks the visitor to sign in”

WordPress’s default CSP sometimes blocks Aihio connections. Aihio’s chatbot settings live in the app itself and don’t require any sign-in on the visitor’s side.

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 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 not, check the Console tab in dev tools.

3. Ask a test question

   Ask the chatbot something from your site content (opening hours, contact details). The answer should arrive correctly in a few seconds.

4. Check the mobile view

   Open the site on your phone. The chat window scales to mobile automatically, but its position shouldn’t cover critical content or CTA 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 how long conversations run.

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