How to Add Online Booking to Squarespace in 2 Minutes

A hair salon owner in Leeds sent us her Squarespace site last month with one line: "everything is here except the booking." Beautiful photos, a services page with prices, a contact form that people filled in at midnight and she answered at 8am the next morning. Roughly a third of those enquiries never turned into an appointment.

Nothing about the site needed fixing. It needed one block on the services page that says "book now" and actually books.

Here is the two minute version.

The short version

• Create your booking page in ZenSched (services, hours, staff)
• Open Booking setup, then the Share and embed tab
• Pick popup, bubble or inline, then copy the snippet
• In Squarespace, add a Code Block and paste it
• Save, publish, and make one test booking yourself

Step 1: build the booking page first

The widget is just a doorway. What clients see behind it is your ZenSched booking page, so set that up before you touch Squarespace.

The minimum useful setup is your services with honest durations, your business hours, and your staff. Durations matter more than people expect. If a balayage really takes two hours and forty minutes, put that in, because ZenSched checks the full service duration against the calendar before it offers a slot. Round it down to two hours and you will spend your Saturdays apologising.

If you need details before the appointment, add custom intake fields. Pet breed, hair history, session goals, whatever you currently ask over DM.

Step 2: choose how booking appears on your site

There are three ways to put ZenSched on a Squarespace page, and they suit different pages.

For most service businesses the honest answer is bubble plus one inline block. The bubble catches people who are two thirds through reading and decide now; the inline block catches people who came specifically to book.

Step 3: copy your code block

In ZenSched, go to Booking setup and open the Share and embed tab. Pick your style, set the button label and color, then hit Copy. You get a single script tag that looks roughly like this.

<script
  src="https://zensched.app/v1/embed.js"
  async
  data-business="your-store"
  data-storefront="your-shop"
  data-mode="bubble"
  data-primary="#0d0c0b"
  data-button-label="Book now"
  data-position="bottom-right"
  data-on-booked="stay"
></script>

Do not hand type this. The data-business and data-storefront values come from your own booking link, and copying from the dashboard means they are always right.

Step 4: paste it into a Squarespace Code Block

In the Squarespace editor:

• Open the page where you want booking (Services works well)
• Click an insert point, then choose Code from the block menu
• Set the block type to HTML
• Paste the ZenSched snippet, then click outside the block
• Save, then Publish

Two things trip people up here. First, the Code Block editor sometimes shows a placeholder rather than the live widget while you are still editing, which is normal; check the published page, not the editor. Second, Code Blocks need a Business plan or higher. If you are on Personal, skip to the link setup below.

The no code alternative that still works

If you do not want a Code Block at all, use a button. In any Squarespace button or navigation item, set the link to your ZenSched booking link:

https://your-shop.zensched.app/your-store

The subdomain is your storefront, and the path after the slash is the specific booking page. Clients get the same branded booker, the same availability checks, the same confirmation email. The only difference is that they land on a ZenSched page instead of staying on yours.

Start with the link. It takes thirty seconds and it works on every plan. Move to the embed when you want people to stay on your page.

Step 5: test one real booking

Book yourself, then check three things: the appointment appears on your ZenSched calendar with the right duration, the confirmation email arrives, and the slot you just took is no longer offered.

That last one matters. Two clients hitting the same slot at the same moment is the failure everyone worries about, and ZenSched validates capacity and existing appointments at the moment of booking, not just when the page loaded.

Long tail details people ask about

Can I use different snippets on different pages? Yes. A popup button on the services page and an inline booker on a dedicated Book page is a common setup. Use one bubble snippet at most, though, or you get two launchers.

Will the widget work on mobile? The booker is responsive and the popup goes near full screen on small phones so the date and time steps stay readable.

Can I track bookings in analytics? A zensched:booked event fires on window when a booking completes, so you can pass it to GA4 or anything else you already run.

What happens after booking? Your choice in the snippet: stay on the confirmation screen, close the widget, or redirect to a thank you page on your Squarespace site.

FAQ

Frequently asked questions

Keep reading

• How to add booking to a Squarespace site
• How to add booking to a Wix website
• Booking widget for WordPress
• Online booking page
• Custom booking fields
• Salon booking software