Add Chatbot to Webflow
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="/?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">
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