Add Chatbot to Wix
Requires premium plan with connected domain
Plan Requirement: Adding custom code to Wix requires a premium plan with a connected domain. Free Wix sites cannot use custom code injection.
Method 1: Custom Code in Dashboard (Recommended)
Add the chatbot to all pages using Wix's Custom Code feature.
Open Site Dashboard
Go to your Wix dashboard (wix.com) and select your site. Click on "Settings" in the left sidebar.
[Placeholder: /images/placeholders/wix-step1.png]
Find Custom Code
Scroll down to the "Advanced" section and click on "Custom Code".
[Placeholder: /images/placeholders/wix-step2.png]
Add New Code
Click "+ Add Custom Code" button at the top right of the page.
[Placeholder: /images/placeholders/wix-step3.png]
Paste Your Code
Paste your Hyperleap embed code in the text box. Give it a name like "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>[Placeholder: /images/placeholders/wix-step4.png]
Configure Placement
Under "Add Code to Pages", select "All pages". Under "Place Code in", select "Body - end". This ensures the script loads before </body>.
[Placeholder: /images/placeholders/wix-step5.png]
Apply and Publish
Click "Apply" to save. Then go to your site editor and click "Publish" to make the changes live.
[Placeholder: /images/placeholders/wix-step6.png]
Method 2: HTML Embed Element (Visual Editor)
Add the chatbot using the Wix Editor with the HTML iframe/embed element:
- 1Open your site in the Wix Editor
- 2Click the "+" (Add) button in the left sidebar
- 3Go to "Embed Code" > "Embed HTML"
- 4A gray box will appear - drag it to any position on your page
- 5Click "Enter Code" on the element
- 6Select "Code" mode in the popup
- 7Paste your Hyperleap embed code
- 8Click "Update" and publish your site
Note: The HTML embed element works on free plans, but the chatbot will only appear on pages where you add the element. Use Method 1 for site-wide deployment.
Method 3: Velo by Wix (Advanced)
For developers who want more control, use Velo (Wix's development platform):
- 1In the Wix Editor, click "Dev Mode" in the top menu
- 2Click "Turn on Dev Mode"
- 3In the left sidebar, find "Page Code" or "Site Code"
- 4For site-wide: Open masterPage.js
- 5Add the chatbot initialization code in the onReady function
- 6Save and publish your site
// masterPage.js or page code
$w.onReady(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);
});