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.
Ensure you have your iFrame code or the iFrame URL ready from Bookedin (via Calendar → Widget/iFrame).
Always use https:// in the iFrame URL (otherwise, Squarespace will block the content for security reasons).
Log in to your Squarespace account and open your site in the Editor.
Navigate to the page where you want to place the calendar and click Edit.
Click the plus icon (Add Block) at the location where you want the calendar.
In the block menu, select Code (you may need to scroll down or search for it).
In the Code block, paste your iFrame code.
Click Apply to save the block.
Drag and position the block; set the width to 100% if desired.
Use the Mobile / Desktop preview button to check how it looks on mobile devices.
Click Save or Done > Publish to take the changes live.
Log in and open your site in the Site Editor.
Go to the desired page and click Edit.
Click an insert point and choose Code (under the "More" section).
Paste your iFrame code into the code field.
Save the block and position it where you want.
Preview the page and publish the changes.
Blank screen or error: Verify that the iFrame URL starts with https://; otherwise, Squarespace will block the "mixed content."
Double 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.
Cache/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.
Site-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.
