Add a calendar to your Squarespace website

Embedding the Bookedin calendar (iFrame) on your Squarespace website

Below is a tutorial for placing the Bookedin iFrame calendar on a Squarespace website. We will cover the preparation, two methods (Squarespace 7.1 and Classic), and important tips for the best result.

Before you begin

• checkEnsure you have your iFrame code or the iFrame URL ready from Bookedin (via Calendar → Widget/iFrame).
• checkAlways use https:// in the iFrame URL (otherwise, Squarespace will block the content for security reasons).

Option A: Squarespace 7.1 (Most common)

1. 1
   Log in to your Squarespace account and open your site in the Editor.
2. 2
   Navigate to the page where you want to place the calendar and click Edit.
3. 3
   Click the plus icon (Add Block) at the location where you want the calendar.
4. 4
   In the block menu, select Code (you may need to scroll down or search for it).
5. 5
   In the Code block, paste your iFrame code.
6. 6
   Click Apply to save the block.
7. 7
   Drag and position the block; set the width to 100% if desired.
8. 8
   Use the Mobile / Desktop preview button to check how it looks on mobile devices.
9. 9
   Click Save or Done > Publish to take the changes live.

Option B: Squarespace (Classic)

1. 1
   Log in and open your site in the Site Editor.
2. 2
   Go to the desired page and click Edit.
3. 3
   Click an insert point and choose Code (under the "More" section).
4. 4
   Paste your iFrame code into the code field.
5. 5
   Save the block and position it where you want.
6. 6
   Preview the page and publish the changes.

Handy Tips

• checkBlank screen or error: Verify that the iFrame URL starts with https://; otherwise, Squarespace will block the "mixed content."
• checkDouble scrollbar: If you see a scrollbar inside the calendar, increase the height attribute in your iFrame code or use a responsive wrapper so the content fits perfectly.
• checkCache/Preview: Sometimes the calendar won't appear immediately in the editor. Save your work and refresh the live page in an incognito window to check.
• checkSite-wide embed: If you want the calendar in the footer or header, go to Settings > Advanced > Code Injection. Note: Code Injection usually requires a Squarespace Business or Commerce plan. For most users, using a Code Block on a regular page is the best approach.