HomeAdd a widgetSquarespace
Add a booking calendar to Squarespace
Let visitors book you straight from Squarespace. Set your real working hours — split days included — and the widget offers slots in the visitor’s own timezone, checking your connected calendar so it never double-books you.
Free plan, no card. Paid plans start at $19 a month.
Why do it this way on Squarespace
Squarespace pages are vertical sections, which suits a booking calendar: give it its own section, drop a Code Block in, and it sits at the natural width. Set the block’s Type to HTML, not JavaScript — that is the step people miss. Remember you will not see the calendar while you are logged in and editing, because Squarespace disables embedded scripts for the site owner; open the live URL in a private window to check it.
See it working
This is a real Sorraia booking calendar — the one we use for product demos, embedded here exactly the way you would embed yours. Pick a slot and it books.
How to add a booking calendar to Squarespace
A widget that sits in the page flow goes in a Code Block on that page. The block menu labels it “Code”; everyone, Squarespace’s own docs included, calls it a Code Block.
The tiers are now Basic, Core, Plus and Advanced — previously Personal, Business, Commerce Basic and Commerce Advanced. Code Blocks exist on every plan, but Squarespace treats JavaScript inside one as a premium feature available on Core and above, and gates Code Injection the same way. There is no way to run a third-party widget on Basic. The 14-day trial does include the premium custom-code features, so you can test the widget before you buy — trial sites simply are not indexed by search engines. Downgrading later does not delete your code, but it does stop working; Squarespace does not document whether the block goes inert or starts printing the snippet as text, so check the live site after any plan change.
In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.
Save the calendar and the Copy Embed Code popup appears; the Install wizard on the calendar’s row on the Calendars page does the same job with a verification step.
Check the plan first. JavaScript in a Code Block needs Core, Plus or Advanced (or a legacy Business / Commerce plan). On Basic it will not run.
Edit the page, hover the section, click Add block or the + icon, and choose Code.
Click the pencil icon on the block and set the Type menu to HTML — not JavaScript. This is the step people get wrong: Squarespace prints a JavaScript-typed block on the page as visible text rather than running it.
Paste the Sorraia snippet, script tags included, and leave Display Source unchecked. Save.
Open the live site in a private window to check. While you are logged in, Squarespace disables embedded scripts and shows a “this block contains embedded scripts” notice where the widget should be.
Then the Type menu is on the wrong option. Squarespace force-locks Display Source on for the CSS, JavaScript and Plain Text types, which is exactly the trap — the intuitive choice for a script is “JavaScript”, and it is the one that will not run. Set Type to HTML and the checkbox becomes editable.
What you get
Let visitors book you straight from Squarespace. Set your real working hours — split days included — and the widget offers slots in the visitor’s own timezone, checking your connected calendar so it never double-books you.
Split days, not one block
A working day is an ordered list of up to four windows, so 9:00–12:00 plus 13:00–17:00 is one calendar rather than a compromise — the lunch gap serves no slots at all. The honest limit: that window list applies to every working day you tick. Split days are supported; giving Monday different hours from Tuesday is not.
Slots in the visitor’s own timezone
The widget detects the visitor’s timezone in their browser and renders every slot in it, with the zone named and changeable from a dropdown — and if their zone is not in the list, it gets added rather than snapping them to a wrong one. Nobody has to work out in their head whether your 3pm is their 3pm, which is the most common way a booking gets missed.
It fails safe, so it never double-books
When a host has a calendar connected, busy time is checked before a slot is offered. If that check cannot complete — the provider is down, the token is stale — the day is treated as busy rather than offered. You may occasionally show less availability than you have; you will not get booked over something.
Name and email are yours to rename
The built-in Name and Email rows are ordinary rows in the field list: rename them, reorder them, put your own questions above them. The booking payload keeps its fixed shape underneath, so renaming a label can never break a workflow that reads it.
Every booking gets a manage link
The confirmation carries a token link the guest uses to reschedule or cancel — rescheduling keeps the same link working, cancelling retires it, so a cancelled meeting’s link stops being a working key the moment the meeting is off.
More detail in the Help Center: Calendars & bookings · Embedding on your website
Things worth knowing about Squarespace
- Squarespace disables embedded scripts while you are logged in and editing, replacing the block with a notice. A working widget therefore looks dead to the site owner. Verify in a private window or via Preview in Safe Mode.
- The Code Injection panel moved out of Settings → Advanced into Website → Pages → Custom Code. Older tutorials will send you scrolling through a Settings menu that no longer has it.
- Use a Code Block only for a widget that should occupy space in the layout. A block containing a script that draws nothing in place still takes up vertical room and leaves a visible gap, most noticeably in Fluid Engine sections.
- Footer is the safer of the two Code Injection fields for a launcher, because the page already exists when the script runs. Header is not inherently slower — an async or defer tag there does not block first paint — but a synchronous snippet in Header will delay it.
Questions
Can I have a lunch break, or two separate blocks in a day?
Yes — that is exactly what the windows are for. A day holds up to four working-hours windows, so a morning block and an afternoon block is the normal setup rather than a workaround, and the gap between them offers nothing. What it does not do is per-day hours: the same window list applies to every day you have ticked as a working day.
What timezone do visitors see?
Their own, detected in their browser, with the zone shown on the widget and changeable if they are travelling. Your own timezone is displayed alongside so both sides can see what they are agreeing to.
Does it check my real calendar?
Yes, when you connect one — Google Calendar today. Busy time is read before slots are offered, and if that read fails the day is treated as busy rather than offered, so an outage costs you a few visible slots instead of a double booking. Multi-host modes like round-robin and collective scheduling are available on organisation accounts.
Which Squarespace plan do I need to add a widget?
Core or higher. Code Blocks appear on every plan, but Squarespace only allows JavaScript inside one on Core, Plus and Advanced (and on the legacy Business and Commerce plans), and Code Injection has the same gate. On Basic the block accepts plain HTML, Markdown and CSS but will not run a script. Squarespace’s 14-day trial does include the premium custom-code features, so you can test the widget before you buy — trial sites just are not indexed by search engines.
I pasted the code and the block says “embedded scripts are disabled”. Is it broken?
No — that is Squarespace protecting you from your own scripts while you edit. Visitors see the widget; you do not, because you are logged in. Open the live URL in a private or incognito window and it will be there.
My code prints on the page as text instead of running. What happened?
The Code Block’s Type menu is set to JavaScript. Squarespace renders the CSS, JavaScript and Plain Text types as visible source by default, and force-locks the Display Source checkbox on for them — which is why you cannot untick it. Set Type to HTML, keep the script tags around the snippet, and untick Display Source.
Add a booking calendar to Squarespace
Build it in Sorraia, paste one line into your Squarespace site, and change it later without touching the embed again.