Adding the booking form to a Squarespace site

Squarespace handles this well once you know its two habits: it only runs code on the paid plans, and it won't show you the result while you're logged in. The general article explains what the code does and where to find your booking code; this one is the Squarespace-shaped version.

Check your plan first

Squarespace only runs JavaScript inside a code block on its paid tiers — Core, Plus and Advanced on the current plans, or Business and the Commerce plans on the older ones. On Personal it simply won't run, and there's no way around it.

If you're on Personal, put a Book a Table button on the page linking to your booking page instead. That works on every plan, and the wallets work there too — which, as below, they can't on your own Squarespace pages.

Adding the block

Edit the page, hover where you'd like the form and click + (or Add Block), then choose Code. Open the block, leave the language on HTML, and make sure Display Source is switched off — left on, Squarespace prints your snippet on the page as text rather than running it.

<div id="nomnom-booking">
  <a href="https://book.nomnom-app.net/YOUR-CODE">Book a Table</a>
</div>

<script src="https://api.nomnom-app.net/web/embed.js"
        data-account="YOUR-CODE"
        data-target="nomnom-booking"></script>

Replace YOUR-CODE with your booking code in both places, then save.

Why you can't see it

This is the one that wastes an afternoon. Squarespace often refuses to render code blocks while you are signed in to your own site. It's a security measure on their side, not a fault with the form, and your guests see it perfectly well.

Check it by clicking Preview in Safe Mode, or by opening the page in a private window where you aren't logged in. Judge it there — never from the editor.

Don't reach for Code Injection

A page's own Code Injection field writes into the page's head, which runs before the page exists — the script would find nothing to fill. The site-wide Footer injection runs late enough, but drops the form at the very bottom of every page on the site. The Code block is the only right home for it.

Apple Pay and Google Pay

Not on Squarespace, and it's worth knowing before you promise it to anyone. Stripe only offers the wallets on a website it has verified, and verifying means answering one specific file at one specific address on your domain. Squarespace gives you no way to put a file there.

Nothing breaks: guests see the ordinary card form and type their number as usual. But if the wallets matter to you more than having the form inline, the alternative is a Book a Table button through to your NomNom booking page, where they're already switched on.

Prefer to hand the whole thing over?

If checking Safe Mode every time you're not sure whether something's actually working feels like more supervision than you signed up for, we do this ourselves for a number of venues already: a full redesign, hosted by us, with your booking form built directly into the page from the start rather than pasted on afterwards — so none of what's above is anything you ever have to touch again.

There's no charge to build it. Keeping it is £15 a month, and that covers hosting and any change you ever want making — you message us what you'd like changed and we do it, no hourly rate and no quote for every little thing. For most venues that comes out below what the hosting, theme and plugin costs already add up to before a single change is even made.

No pressure either way, and it makes no difference to your booking account whichever you choose. If you'd like to see what we'd put together, just get in touch.