HTML Chatbot: Add AI Chat to Any HTML Site
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
var 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",
};
var 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
HTML chatbot FAQs
What is an HTML chatbot?
An HTML chatbot is an AI chat widget you add to a plain HTML website with a single script tag — no framework, plugin, or backend required. Paste the snippet before the closing </body> tag and the widget loads on every page it is on, answering visitor questions from your own knowledge base 24/7.
How do I add a chatbot to my HTML website?
Three steps: create your AI agent in Hyperleap and train it on your website or documents, copy your embed snippet from the dashboard, and paste it into your HTML just before the closing </body> tag. Save and reload — the chat bubble appears. It takes about 2 minutes and works on any static or custom-built site.
Does the chatbot slow down my website?
No meaningful impact. The widget loads asynchronously after your page content, so it does not block rendering, and it is lightweight (under 50kb gzipped). Your page speed scores are driven by your own content, not the chat widget.
Do I need a backend or database for the chatbot to work?
No. The script tag is the whole integration — conversations, AI responses, lead capture, and analytics run on Hyperleap. Your site can be a static HTML page on any host (GitHub Pages, Netlify, S3, shared hosting) and the chatbot works the same.
Can the same HTML chatbot also answer on WhatsApp or Instagram?
Yes. The same agent, trained once, can also connect to WhatsApp Business API, Instagram DM, and Facebook Messenger — channels your AI front desk covers alongside the website widget. One knowledge base answers everywhere.
Add a chatbot to other website platforms
The same Hyperleap AI agent embeds anywhere from one knowledge base. Building on a different platform — or running more than one site? Here are the step-by-step guides.
See all website chatbot integrations.
Ready to Add Chat to Your Website?
Create your AI agent and get your embed code in minutes.