Squarespace · Code Block · 5 minutes
Add online booking to your Squarespace site
One Code Block is the whole integration. Paste the snippet where booking should live and the page starts taking appointments — clients pick a service and a time without leaving your site. There is one plan requirement worth knowing before you start, and one habit that saves an hour of confusion.
Step by step
Add a Code Block
Edit the page and add a Code Block exactly where the booking list should appear. It behaves like any other block — you can move it between sections later.
Paste the snippet and save
Drop in your snippet from Booking Page → Add to Website and save the page. Nothing else needs configuring: the widget sizes itself to the content.
Check the published page
Open the published page, not the editor. Code Blocks often look empty inside the Squarespace editor even when visitors see the widget perfectly — this is normal and not a sign that something broke.
The code you paste
Example — replace with your own snippet
<iframe id="booking-frame" loading="lazy" src="https://app.gobookingsuite.com/?key=YOUR_KEY&embed=1"
title="Book an appointment"
style="width:100%;border:0;height:600px"></iframe>This example is an illustration — the key is a placeholder. Your real snippet, with your key, is in the admin under Booking Page → Add to Website. It also carries your salon's phone and email as a fallback and a small script that reports the widget height.
Before you start
JavaScript and iframes in Code Blocks need Core or higher
Per Squarespace's own documentation, JavaScript and iframes in Code Blocks are a premium feature available on Core, Plus and Advanced, plus the legacy Business, Commerce Basic and Commerce Advanced plans. On the current Basic plan the block saves, but the code does not run.
What makes this confusing: visitors get no error at all — the area is simply empty. When you are logged in, Squarespace shows a note that the code is not supported, so if you suspect a plan issue, look at the block while signed in.
The result
What your clients end up with
This is the actual widget, embedded here exactly the way it will embed on your Squarespace page. Pick a service and a time — this is the flow your visitors get, inside your own page.
- View the published page in a normal browser tab — an empty block in the editor means nothing.
- The service list renders and clicking a service opens time selection.
- The block grows to fit the list; there is no inner scrollbar.
- If the area is blank for visitors too, check your plan first — that is the most common cause on Squarespace, ahead of anything in the snippet.
Live demo — a real widget, book a test appointment
Questions
6 things people ask
Do I need a developer for this?
No. Add a Code Block, paste, save. If you can add an image block, you can do this.
Which Squarespace plan do I need?
One that supports JavaScript and iframes in Code Blocks: Core, Plus or Advanced on the current lineup, or Business, Commerce Basic or Commerce Advanced if you are on a legacy plan. The Basic plan will save the block but not run the code.
Why is the block empty in the editor?
The Squarespace editor frequently renders Code Blocks as empty even when everything works. Always judge by the published page.
Will it slow my site down?
The widget is lazy-loaded: if it sits below the fold, the browser does not fetch it until a visitor scrolls to it. In our measurement that keeps roughly 21 requests and 332 KB off the initial page load.
What do clients see if the booking service is unreachable?
After 8 seconds without a response, the frame is replaced by your salon's phone number and email so the visitor still has a way to reach you. The fallback disappears by itself once the service responds again.
Can different pages show different services?
Yes. The same embed shows your full catalog by default, or one service or one category when you add a parameter to the URL. The admin generates the right snippet per page.
Different site?
Wondering whether this is the right booking tool at all?See what the widget does on a Squarespace site →
Get your embed code
in the next five minutes.
Sign up, add your services, copy the snippet from Booking Page → Add to Website.