Add Chatbot to Any HTML Website
Works on any website
Quick Start
Add this code to any HTML page, just before the closing </body> tag:
<script>
(function () {
// Define chatbot configuration
window.userChatbotConfig = {
chatbotId: "YOUR_CHATBOT_ID",
privateKey: "YOUR_PRIVATE_KEY",
};
// Dynamically load chatbot plugin
const chatbotScript = document.createElement("script");
chatbotScript.src = "https://chatjs.hyperleap.ai/chatbot.min.js";
chatbotScript.async = true;
document.head.appendChild(chatbotScript);
})();
</script>Important: Replace YOUR_CHATBOT_ID and YOUR_PRIVATE_KEY with your actual values from the Hyperleap dashboard.
Full HTML Example
Here's how a complete HTML page looks with the chatbot installed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<!-- Your website content here -->
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is my awesome website content.</p>
</main>
<footer>
<p>© 2025 My Company</p>
</footer>
<!-- Hyperleap Chatbot - Add just before </body> -->
<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>
</body>
</html>Step-by-Step Guide
Get Your Embed Code
Log in to your Hyperleap dashboard. Go to your AI agent > Channels > Website. Copy your unique embed code with your chatbotId and privateKey.
Open Your HTML File
Open the HTML file of the page where you want the chatbot. This could be index.html or any other page.
Find the Closing Body Tag
Scroll to the bottom of your HTML file and find the </body> tag.
Paste the Code
Paste your Hyperleap embed code directly BEFORE the </body> tag.
Save and Test
Save your HTML file and refresh the page in your browser. You should see the chat widget appear.
Adding to Multiple Pages
For multi-page websites, you have several options:
Option 1: Add to Each Page
Copy the script to each HTML file where you want the chatbot.
Option 2: Use a Common Footer
If you're using server-side includes or a templating system, add the script to your common footer file.
Option 3: External JS File
Save the chatbot initialization code in a separate .js file and include it on all pages.
Script Features
Ready to Add Chat to Your Website?
Create your AI agent and get your embed code in minutes.