Why does my Code block say the script is disabled?

Squarespace does not run scripts inside the page editor. The widget appears once you save and view the published page.

Can I use this instead of Squarespace Scheduling?

If your team already uses Microsoft Bookings and Outlook, yes: bookings stay in Microsoft 365. BookingsXP does not replace a scheduling system; it puts Microsoft Bookings on your Squarespace page.

Can I preselect a service for a specific page?

Yes. Add service="…" to the element with the service ID, or the code from your Bookings service link (the part after /s/). The service step is then skipped.

Websites & CMS

Microsoft Bookings on Squarespace

Squarespace has its own scheduling product, but if your calendar lives in Microsoft 365 you want bookings to land in Outlook and Teams. BookingsXP lets a Squarespace page show your Microsoft Bookings availability in a widget that fits the design, while Microsoft stays the system of record.

Start free Quickstart

Plan: Plan: FreeWorks on every plan, including Free ($0, no card).
In short: A Code block with the script and element, or Code Injection for a floating button on every page.
Microsoft Bookings: Stays your system of record. Bookings land in Outlook and Teams and Microsoft sends the invites and reminders.

How it works

What happens with Squarespace

A Squarespace Code block inserts your HTML into the page itself, so the loader runs on your site's origin.
The loader pushes booking events to window.dataLayer on the page and calls gtag if it is present, so a Google tag added through Code Injection receives them.
The widget resizes itself inside the Code block; you do not need to set a height.

Setup

Set up Squarespace

4 steps. Names of menus and buttons are as they appear today; vendors rename things, so look for the closest match.

Step 1: Add a Code block
Edit the page, click an insert point or Add Block, and choose Code. Leave the display mode on HTML.
02
Step 2: Paste the snippet
Paste the script and element and apply. Replace the widget ID, or use booking-url with your public Bookings link.
HTML
```
<script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget widget="w_8fk2m1qz" theme="auto"></bookingsxp-widget>
```

Step 3: Optional: a floating button everywhere

Open Code Injection in your site settings and paste the script and a floating element into the Footer field. Save.

HTML

<script src="https://bookingsxp.com/embed/v1.js" async></script>
<bookingsxp-widget widget="w_8fk2m1qz" mode="floating" button-text="Book now" accent="#111827"></bookingsxp-widget>

Step 4: Check the live page
Squarespace disables scripts in Code blocks while you edit, so the editor shows a placeholder. Save, exit the editor and view the live page to test.

What you get

The result

Microsoft Bookings availability inside a Squarespace page, not a link out to outlook.office.com.
A widget that follows your accent colour and light or dark theme.
Booking events on the page for GTM or GA4 added through Code Injection.

Good to know

Limits and caveats

Squarespace allows JavaScript in Code blocks and Code Injection only on plans that include custom code. Check your plan first.
The widget does not run in the editor preview; test on the live page.
If a Code block strips the custom element, use the <div data-bookingsxp data-widget="…"></div> form instead.

FAQ

Squarespace questions

Something not covered? Email hello@bookingsxp.com.

Start free, no card

One widget, three templates, GTM and GA4 events and attribution in every booking. No card, no time limit.

Start free Try it with your link

What happens with Squarespace

Set up Squarespace

Step 1: Add a Code block

Step 2: Paste the snippet