Thezi

Help  ›  Putting it on your website

Add the booking form to Squarespace

You will need: your embed code (see where the code is) and about five minutes.

Squarespace has two blocks that can hold it. Which one you use depends on your plan.

Business plan or higher: the Code block

This is the better route because the form can tell your page how tall it is.

  1. Sign in to Squarespace and open the page you want the form on — a Reservations or Book page is usual.
  2. Press Edit (top left), then hover where you want the form and press the + that appears (or Add Block on a section).
  3. Choose Code.
  4. Delete the placeholder text in the box and paste your embed code in its place.
  5. Leave Display Source unticked.
  6. Press Apply, then Save (top left) and Exit.

Open the page on your phone. The form should fill the width and grow as a diner moves through it.

Personal plan: the Embed block

The Personal plan does not allow the Code block, but the Embed block works on every plan.

  1. Open the page, press Edit, then the + where you want the form.
  2. Choose Embed.
  3. Click the </> icon on the right of the URL box (it says Code Snippet).
  4. Paste only the first part of your embed code — from <iframe up to and including </iframe>. Leave out the <script> lines.
  5. Press Set, then Save and Exit.

Because the second part of the code is missing, the form cannot tell the page how tall it is. If the form looks cut off, edit the block again and change min-height:640px to height:900px. On very long confirmations a diner may scroll inside the form; that is fine, it just looks slightly less tidy.

If you would rather use a button

Add a Button block anywhere, give it the text Book a table, and paste your booking link (from Your website in your dashboard) as its link. Set it to open in a new window. This works on every plan.

Things people ask

  • The block says "Code blocks are unavailable on your plan". You are on the Personal plan — use the Embed block, above.
  • The form shows but the page beneath it is white space. The block's section is taller than the form. Edit the section and reduce its minimum height.
  • I want it in a pop-up. Squarespace's own pop-up cannot hold code. Put it on its own page and link to that instead.
  • Squarespace 7.0. The same blocks exist; Code and Embed are under Add Block → More.

Still stuck? hello@thezi.app reaches a person, usually the same day.