How to Add Koalendar to a Squarespace Site

Let your visitors easily book time with you—right from your Squarespace site. Koalendar works perfectly with Squarespace and gives you multiple ways to integrate:

🧭 In This Guide

1. 🔗 Add a Link (Button, Text, or Image)
2. 🧩 Embed Koalendar on a Page
3. 🎈 Show a Floating Button on All Pages

🔗 Add a Link (Button, Text, or Image)

The quickest way to start:

1. Add a Button, Text Block, or Image to your Squarespace page.
2. Highlight the element and click the Link icon

3. Choose URL, and paste your Koalendar link (e.g., https://koalendar.com/e/you )

   

✅ Works great for basic booking access without embedding anything

🧩 Embed Koalendar on a Page

Koalendar offers several embed styles. Pick the one that fits your design:

• 🧩 Inline Embed – Embed the full scheduler inside your page content
• 🖱️ Popup Link or Button – Add a text or button that opens a popup scheduler
• 🎈 Floating Button Widget – A button that stays visible across the screen

See examples: Koalendar Embed Options →

How to Embed:

1. Copy the Embed code that you want:

   

2. In your Squarespace page, click + Add Block → Code, and click the Edit icon
3. Make sure the selected mode is HTML and paste your Koalendar embed code
4. Resize as needed and publish

📌 Important: In Squarespace’s editor, you might see a “Script disabled” message. This is normal—the embed will display correctly on your live website.

🎈 Show a Floating Button on All Pages

Want to display a scheduling button across your entire site? You can do this with our Popup Widget and Squarespace's Code Injection.

1. Copy your Koalendar Popup Widget code

   

2. In Squarespace, go to Website → Pages

   

3. Scroll to the bottom, and select Custom Code > Code Injection

   

4. Inside the Footer section, paste your Koalendar widget code, and click Save

   

5. That's it! Refresh the page and you will see your button appear on your all your pages