← Back to Website Platforms

WordPress Chatbot

Plugin or manual installation

Easy5 minutesTwo methods available

Method 1: Using a Code Snippets Plugin (Recommended)

This method is safest as it doesn't require editing theme files and survives theme updates.

1

Install WPCode Plugin

Go to Plugins > Add New. Search for "WPCode" (or "Insert Headers and Footers"). Click Install Now, then Activate.

2

Add New Snippet

Go to Code Snippets > Add Snippet (or WPCode > Add Snippet). Click "Add Your Custom Code (New Snippet)" and select HTML Snippet.

3

Paste Your Code

Give your snippet a name like "Hyperleap Chatbot". Paste your embed code in the code area.

<script>
   (function () {
        window.userChatbotConfig = {
            chatbotId: "YOUR_CHATBOT_ID",
            privateKey: "YOUR_PRIVATE_KEY",
        };
        const chatbotScript = document.createElement("script");
        chatbotScript.src = "https://chatjs.hyperleap.ai/chatbot.min.js";
        chatbotScript.async = true;
        document.head.appendChild(chatbotScript);
    })();
</script>
4

Configure Location

Under "Insertion", select "Site Wide Footer" as the location. This ensures the code loads on every page before </body>.

5

Activate and Save

Toggle the snippet to "Active" and click "Save Snippet". Visit your site to see the chat widget.

Method 2: Editing Theme Files Directly

Warning: Use a Child Theme

Edits to theme files are lost when the theme updates. Always use a child theme for permanent changes.

WordPress Theme File Editor
  1. 1Go to Appearance > Theme File Editor
  2. 2Select your active theme (preferably a child theme)
  3. 3Click on footer.php in the right sidebar
  4. 4Find the </body> tag near the bottom
  5. 5Paste your Hyperleap embed code directly BEFORE </body>
  6. 6Click "Update File" to save

Note: Some themes use different file structures. If you can't find footer.php, try looking for theme.json or consult your theme's documentation.

Method 3: Using functions.php (Developer Method)

For developers who prefer to add scripts via WordPress hooks:

// Add to your child theme's functions.php

function add_hyperleap_chatbot() {
    ?>
    <script>
       (function () {
            window.userChatbotConfig = {
                chatbotId: "YOUR_CHATBOT_ID",
                privateKey: "YOUR_PRIVATE_KEY",
            };
            const chatbotScript = document.createElement("script");
            chatbotScript.src = "https://chatjs.hyperleap.ai/chatbot.min.js";
            chatbotScript.async = true;
            document.head.appendChild(chatbotScript);
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_hyperleap_chatbot');

Frequently Asked Questions

Do I need a WordPress plugin to add a chatbot?

No. You can embed Hyperleap AI directly into WordPress by adding a JavaScript snippet to your theme's footer via Appearance > Theme Editor or the WPCode plugin. This is faster than a dedicated WordPress chatbot plugin because it loads asynchronously. Plugin-based options from platforms like Tidio and LiveChat are also available but add more overhead.

What is the best WordPress chatbot?

Hyperleap AI is built for businesses that need an AI chatbot across their WordPress website, WhatsApp, Instagram, and Facebook Messenger. It trains on your own knowledge base, answers questions 24/7, and embeds on any WordPress theme in minutes with no plugin required.

Will a chatbot slow down my WordPress site?

The Hyperleap embed script loads asynchronously (async attribute), so it does not block your page from loading. Your WordPress Core Web Vitals scores are unaffected. Avoid chatbot plugins that inject synchronous scripts or large CSS bundles into your page head.

Can I add a chatbot to WordPress.com?

WordPress.com restricts custom code injection on free and Personal plans. You need the Business plan or higher to install plugins or add custom JavaScript. WordPress.org (self-hosted) has no restrictions — paste the embed code freely in your theme footer.

How do I add a chatbot to a specific WordPress page only?

Use WPCode (formerly Insert Headers and Footers) to conditionally inject the Hyperleap script. In WPCode, set the code location to 'Footer' and use the 'Display Rules' to target specific pages, post types, or categories. Alternatively, edit individual page templates in your theme.

Need Help?

Our team is here to help you get set up.