Add Chatbot to WordPress

Plugin or manual installation

Easy•5 minutes•Two 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.

Install WPCode Plugin

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

Add New Snippet

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

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="/?originalUrl=https%3A%2F%2Fhyperleap.ai%2F%26quot%3Bhttps%3A%2F%2Fchatjs.hyperleap.ai%2Fchatbot.min.js%26quot%3B%3B%2520%2520%2520%2520%2520%2520%2520%2520chatbotScript.async%2520%3D%2520true%3B%2520%2520%2520%2520%2520%2520%2520%2520document.head.appendChild(chatbotScript)%3B%2520%2520%2520%2520%257D)()%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fpre">

Configure Location

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

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.

1Go to Appearance > Theme File Editor
2Select your active theme (preferably a child theme)
3Click on footer.php in the right sidebar
4Find the </body> tag near the bottom
5Paste your Hyperleap embed code directly BEFORE </body>
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="/?originalUrl=https%3A%2F%2Fhyperleap.ai%2F%26quot%3Bhttps%3A%2F%2Fchatjs.hyperleap.ai%2Fchatbot.min.js%26quot%3B%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520chatbotScript.async%2520%3D%2520true%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520document.head.appendChild(chatbotScript)%3B%2520%2520%2520%2520%2520%2520%2520%2520%257D)()%3B%2520%2520%2520%2520%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B%3Fphp%7Dadd_action(%26%23x27%3Bwp_footer%26%23x27%3B%2C%2520%26%23x27%3Badd_hyperleap_chatbot%26%23x27%3B)%3B%253C%2Fpre">

Need Help?

Our team is here to help you get set up.

Get Started Free View Other Platforms