Add Chatbot to WordPress
Plugin or manual installation
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.
[Placeholder: /images/placeholders/wordpress-plugin-step1.png]
Add New Snippet
Go to Code Snippets > Add Snippet (or WPCode > Add Snippet). Click "Add Your Custom Code (New Snippet)" and select HTML Snippet.
[Placeholder: /images/placeholders/wordpress-plugin-step2.png]
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>[Placeholder: /images/placeholders/wordpress-plugin-step3.png]
Configure Location
Under "Insertion", select "Site Wide Footer" as the location. This ensures the code loads on every page before </body>.
[Placeholder: /images/placeholders/wordpress-plugin-step4.png]
Activate and Save
Toggle the snippet to "Active" and click "Save Snippet". Visit your site to see the chat widget.
[Placeholder: /images/placeholders/wordpress-plugin-step5.png]
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 = "https://chatjs.hyperleap.ai/chatbot.min.js";
chatbotScript.async = true;
document.head.appendChild(chatbotScript);
})();
</script>
<?php
}
add_action('wp_footer', 'add_hyperleap_chatbot');