Add Chatbot to Squarespace
Requires Business plan or higher
Plan Requirement: Code Injection is available on Squarespace Business, Commerce Basic, and Commerce Advanced plans. Personal plans do not have access to this feature.
Method 1: Site-Wide Code Injection (Recommended)
Add the chatbot to all pages of your Squarespace site.
Open Website Settings
Log in to your Squarespace account. From your site dashboard, click "Website" in the left sidebar, then click "Website Tools".
[Placeholder: /images/placeholders/squarespace-step1.png]
Navigate to Code Injection
Scroll down and click on "Code Injection". This opens the panel where you can add custom code to your site.
[Placeholder: /images/placeholders/squarespace-step2.png]
Add to Footer Section
Scroll down to the "Footer" section. This is where scripts should be added to load before the closing </body> tag.
[Placeholder: /images/placeholders/squarespace-step3.png]
Paste Your Embed Code
Paste your Hyperleap embed code in the Footer text area.
<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/squarespace-step4.png]
Save Changes
Click "Save" at the top of the page. The chatbot will now appear on all pages of your site.
[Placeholder: /images/placeholders/squarespace-step5.png]
Method 2: Page-Specific Code
Add the chatbot to specific pages only:
- 1Go to Pages in your Squarespace dashboard
- 2Hover over the page and click the gear icon (Settings)
- 3Click on the "Advanced" tab
- 4Scroll to "Page Header Code Injection"
- 5Paste your Hyperleap embed code
- 6Click "Save" to apply changes
Note: Page-specific injection uses the Header area, but the Hyperleap script is designed to work from any location on the page.
Method 3: Using a Code Block
For Personal plan users or those who want visual control over placement:
- 1Edit the page where you want the chatbot
- 2Click the "+" button to add a block
- 3Select "Code" from the block options
- 4In the code block editor, change the mode to "HTML" or "JavaScript"
- 5Paste your Hyperleap embed code
- 6Click outside the block to close and save
Note: Code Blocks are available on all plans, but markdown mode has limitations. Full HTML/JS support requires Business plan or higher.