Webflow Chatbot
Requires paid Webflow site plan
Note: Custom code in Webflow requires a paid site plan (Basic, CMS, Business, or Enterprise). The free plan does not support custom code.
Method 1: Site-Wide Custom Code (Recommended)
Add the chatbot to all pages of your Webflow site with one setting.
Open Site Settings
In your Webflow dashboard, select your project. Click the gear icon to open Site Settings. Then click on "Custom code" in the left sidebar.
Navigate to Custom Code
In the left sidebar, scroll down and click on "Custom Code" under the Settings section.
Add Footer Code
Scroll to the "Footer Code" section. This is where scripts that should load on every page before </body> go.
Paste Your Embed Code
Paste your Hyperleap embed code in the Head code or Footer code box.
<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>
Save and Publish
Click "Save Changes" and then publish your site. The chatbot will now appear on all pages.
Method 2: Using Embed Element (Page-Specific)
Use this method if you only want the chatbot on specific pages:
- 1Open your project in the Webflow Designer
- 2Navigate to the page where you want the chatbot
- 3Click the "+" button to add elements
- 4Search for "Embed" in the Components section
- 5Drag the Embed element to the bottom of your page (inside the body)
- 6Double-click the embed element to open the code editor
- 7Paste your Hyperleap embed code
- 8Click "Save & Close" and publish your site
Frequently Asked Questions
How do I add a chatbot to Webflow?▼
The easiest method is Webflow's Custom Code feature: go to your Project Settings > Custom Code tab, paste your Hyperleap embed script in the 'Footer Code' section, then publish your site. This adds the chatbot to all pages. For page-specific placement, use the Page Settings > Custom Code on individual pages.
Which Webflow plan supports custom code?▼
Webflow's Custom Code feature (via Project Settings) requires the Basic plan or higher. The free Starter plan does not allow custom code. You can also use Webflow's Embed element (available on all plans) to add a chatbot to specific pages by placing the embed code inside an HTML embed block.
What is the best chatbot for Webflow?▼
Hyperleap AI is designed for businesses that need an AI chatbot across their Webflow website, WhatsApp, Instagram, and Facebook Messenger. It trains on your knowledge base, answers questions 24/7, and embeds on any Webflow site using a single script — no Webflow app marketplace required.
Can I add a chatbot to just one Webflow page?▼
Yes. In Webflow Designer, select the page, open Page Settings, and paste your embed code in the 'Before </body> tag' section of Custom Code. This limits the chatbot to that page only. Alternatively, use a Webflow Embed element placed on that specific page's canvas.
How long does it take to set up a Webflow chatbot?▼
Setup takes about 5 minutes. Get your Hyperleap embed code from Studio > Settings > Embed, paste it into Webflow's Project Settings > Custom Code > Footer Code, and publish. The chatbot goes live immediately after publishing.