Embed in Squarespace

Your calendar

Downloading icon

Select a calendar and choose how tall it should be, then copy the generated HTML.

Example embed HTML

<div style="width:100%;max-width:1280px;height:650px"><iframe title="Availability calendar" width="1280" height="650" style="display:block;width:100%;height:100%;border:0" src="https://dobu.uk/availability/your-nickname?embed="></iframe></div>

Replace your-nickname with the nickname of the DoBu.uk profile you want to embed.

Add it to Squarespace

  1. Add an Embed Block to the page.
  2. Open the block editor and select Code snippet, then Embed Data.
  3. Paste the copied HTML and save the block.

See the official Squarespace Embed Block instructions for where to find these controls.

Choosing a height

Squarespace gives the Embed Block and the calendar wrapper inside it separate heights. The HTML above gives the wrapper a fixed height and makes the iframe fill it; make the Squarespace block at least as tall as the wrapper.

Making the block shorter does not necessarily crop the calendar: the iframe can overflow the block and cover content below it. Check and size the block in both Squarespace's desktop and mobile layouts. Increase the iframe height if the calendar or enquiry form is clipped.

Squarespace may hide embedded content while you are logged in or editing. Save the page and check its public version in a private or incognito window. The general HTML iframe instructions include automatic resizing for hosts that run embedded scripts reliably.