Adding your booking widget to a Squarespace site

Squarespace is the platform our embed runs on in full: inline, popup and floating button all behave the way they do on a hand-written page, because a Code block puts our script in your page's own document rather than in a frame of its own. The thing to check before anything else is which Squarespace plan you are on.

Which plan you need

Our snippet is JavaScript, and a Code block will only run JavaScript on some Squarespace plans. Squarespace's own sentence: “Adding JavaScript or iframes to code blocks is available in the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans.” Site-wide code injection — the header and footer fields — is “available in the Core, Plus, Advanced, and some legacy billing plans.”

Read it as a list of the plans that can, not of the plans that exist: if your plan is not one of those six names, a Code block will not run the snippet. Core is the lowest of the current names on the list. Business, Commerce Basic and Commerce Advanced are older names — Squarespace's own help centre now calls them “legacy billing plans” — so if you are on one of those, you are covered; if you are shopping for a plan, Core is where the widget starts working. On anything cheaper the widget cannot go on the page at all, and the next section is what to do in that case.

We are not a Squarespace Extension

If you arrived from a search for a Squarespace scheduling extension, here is the straight answer: there is no Calemander extension in Squarespace's Extensions marketplace. The APIs Squarespace publishes to extension developers are commerce APIs — orders, inventory, products, contacts, discounts, transactions — and none of them can put a booking widget on a page. A Code block is how our widget gets onto a Squarespace site, and it is what the rest of this page describes.

Squarespace also owns Acuity Scheduling, which is the scheduler it sells directly. Our widget is added the way any other third-party embed is.

If your plan is not on that list

If your plan is not one of the six, no Code block on it will run the snippet, so the widget cannot go on the page itself. Two things work instead, on any plan:

• Point a Squarespace button or navigation item at your booking page: yourworkspace.calemander.com/your-event.
• On Pro or Studio, serve that page from a subdomain of your own site — book.yourdomain.com — so the link stays on your brand. See Your own booking domain.

A link needs no code and nothing to maintain, and plenty of sites run this way on purpose.

Add the widget

1. Open Embed in the Calemander dashboard sidebar, under Customize. Pick the Event Type, choose a Widget Mode, and click Copy under Code Snippet.
2. In Squarespace, edit the page. Hover over the section, click Add block (or +), and choose Code.
3. Click the pencil icon to open the block editor and paste the snippet into the code field.
4. Leave Display Source switched off — that setting shows code as text on the page instead of running it.
5. Save the block, then publish the page.

Code blocks hold up to 400 KB, around 300,000 characters. The snippet is a few hundred bytes, so the limit will not come up.

If the block looks empty

Check whether you are looking at the page while signed in, because Squarespace sometimes hides embedded code from you in that state: “As a security measure, sometimes your code won't appear when you're logged in, even if visitors can see it. If you can't see the code you added to a code block, click Preview in Safe Mode.” Safe Mode, or a signed-out browser window, shows what a visitor sees — check one of those before concluding the widget is broken.

Where not to put it

• Inside an Index page. Squarespace's note: “Your code might not render if you've added it to a page within an Index.” Put the widget on a regular page.
• Checkout pages. They do not support code at all.
• The lock screen, during a trial. Code cannot be injected into the lock page while the site is still on its trial.

A booking button on every page

The floating-button mode is one snippet that puts a booking button in the corner of whichever pages it loads on. To get it across the whole site, paste that snippet into the Footer field of the Code Injection panel, under Website Tools, instead of into a Code block on one page. Code injection needs Core or above, the same as the Code block.

Matching your site's colours

Set Brand Color in the snippet generator to your site's accent, or choose Plain under Widget theme for a white card that takes its surroundings from your page. My booking page theme uses your Appearance settings — preset, fonts, accent and radius — instead. The full list of options is on Embedding your booking page.

Related

• Embedding your booking page — the three modes, their options and the callbacks.
• Your own booking domain — book.yourdomain.com on Pro and Studio.
• Importing from Calendly — moving your event types across.

Last checked 2026-09-15.