HomeAdd a widgetSquarespace
Squarespace Booking Calendar
Take appointment bookings on your Squarespace site with a booking calendar styled to match it, live with one copy-paste into a Code Block, with every slot shown in the visitor’s own timezone.
Needs Squarespace Core, Plus or Advanced (or a legacy Business or Commerce plan)
Free plan with no time limit, no card.
See it working
This is a real Sorraia booking calendar, loaded by the same embed script you paste and showing times in your own timezone. Pick a slot to see the confirmation screen; nothing is booked.
How to add a booking calendar to Squarespace
Squarespace’s own route to bookings is Acuity Scheduling, a second subscription billed apart from the website plan. A Sorraia calendar skips that: it is an ordinary Code Block on the booking page, on the Core plan or higher, with its colours started from the site’s brand kit. Give it a regular section of its own, set the block’s Mode menu to HTML, and the calendar renders right there in the page rather than on a booking site somewhere else.
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.
Edit the page, hover over the section, and click Add Block in its top-left corner (or a + icon), then choose Code.
Click the pencil icon on the block and set the Mode menu to HTML — not JavaScript. In JavaScript mode Squarespace shows your snippet on the page as text instead of running it.
Paste the Sorraia snippet, script tags included, and leave the Display Source toggle off. Save.
Check the page logged out, or with Preview in Safe Mode: while you are logged in, Squarespace sometimes doesn’t show embedded code even though visitors see it.
Where these steps come from:12
Add the DNS TXT record if the domain’s DNS is yours to edit. Otherwise paste the meta tag into the Header field of Code Injection, which Squarespace injects into the <head> of every page, the homepage included — on Core or higher, like the widget itself.3
JavaScript in a Code Block is a premium feature: Core, Plus and Advanced run it, as do the legacy Business and Commerce plans — not legacy Personal — and Basic doesn’t. If a site moves down to Basic, the snippet stays in the block but stops working.45
Worth knowing for this one
- Blocks can’t go everywhere on Squarespace 7.1: not in auto layout, gallery or collection page sections, and not in the site header. A regular section of its own is the right home for a calendar.1
- Fluid Engine lets you arrange the mobile layout without moving the desktop one, so open Mobile View and give the Code Block room for the time list there as well.6
What Squarespace already has
Acuity Scheduling is Squarespace’s own booking tool. It is billed separately from the website plan, and the Scheduling block that puts it on a page needs a paid Acuity subscription. If a client already pays for Acuity, that block is the native route and a good one. If you would rather not add a second subscription to every client site — or you build on more than one platform — a Sorraia calendar keeps every site’s bookings in one dashboard, and each calendar takes its colours from that site’s brand kit.78
What’s included
- Slots in each visitor’s own timezone
- Google Calendar sync when you connect Google Calendar
- An .ics file with every confirmation
- A Google Meet link when your calendar uses one
- Styled to match: colours from the site’s brand kit
Free plan with no time limit, no card.
More detail in the Help Center: Calendars & bookings · Embedding on your website
Questions
Do I need Acuity Scheduling to take bookings on Squarespace?
No. Acuity is Squarespace’s own scheduling service, billed separately from the website plan, and its Scheduling block needs a paid Acuity plan. A Sorraia booking calendar goes in an ordinary Code Block instead, on Core or higher.
Which Squarespace plan runs a booking calendar?
Core, Plus or Advanced, or a legacy Business or Commerce plan. JavaScript in a Code Block is a premium feature, and Basic doesn’t run it: the snippet would sit in the block and do nothing.
Why can’t I see the calendar while I edit the page?
As a security measure, Squarespace sometimes doesn’t show embedded code to someone who is logged in, even though visitors see it. Click Preview in Safe Mode, or log out and load the page.
The snippet shows up on the page as text. What went wrong?
The Code Block’s Mode menu is on JavaScript, which shows code as text and keeps Display Source switched on. Choose HTML instead, keep the script tags around the snippet, and switch the Display Source toggle off.
What does someone booking through the calendar see?
Slots in their own timezone, then a confirmation with an .ics file, and a Google Meet link when your calendar uses one. Once you connect Google Calendar, each booking syncs to it.
Sources
- Adding blocks · support.squarespace.com
- Code blocks · support.squarespace.com
- Code injection · support.squarespace.com
- Premium features · support.squarespace.com
- Legacy billing plans · support.squarespace.com
- Mobile layouts in Fluid Engine · support.squarespace.com
- Acuity Scheduling billing · support.squarespace.com
- Scheduling blocks · support.squarespace.com
Each page read and checked on 20 October 2026.
Add a booking calendar to Squarespace
Build it in Sorraia, put it live on your Squarespace site with one copy-paste, and change it later without touching the embed again.