Add the booking widget to Squarespace
Use a Code Block for a booking section on one page, or Code Injection for a floating button across the whole site — plus the plan requirement to know about.
Squarespace supports the Seatingly widget in two places: a Code Block on an individual page, and Code Injection for the whole site. Which one you use depends on the widget type you configured in the Partner Portal.
Custom code needs a paid Squarespace plan
Code Blocks and Code Injection are only available on Squarespace’s Business plan and above. On a lower tier you cannot embed the widget — link a button to your direct booking page instead, which works on every plan.
Option 1 — A Code Block on one page
Use this for an inline booking section on a specific page, such as a "Reservations" or "Book an appointment" page.
- Open the page in the Squarespace editor and click Edit.
- Hover where you want the widget and click an insertion point to add a block.
- Search for Code and insert a Code Block.
- Set the block’s language to HTML and paste both lines of the Seatingly snippet, replacing the placeholder content.
- Click Apply, then Save the page.
- Open the live page in a normal browser tab — Squarespace does not execute custom code inside the editor.
Display Source must stay off
The Code Block has a "Display Source" checkbox. If it is ticked, Squarespace prints your code on the page as visible text instead of running it. Leave it unticked.
Option 2 — Code Injection for a site-wide button
If you chose the Floating booking button widget type, install it once at site level so it follows the guest across every page.
- In your Squarespace dashboard, go to Settings → Advanced → Code Injection.
- Paste the Seatingly snippet into the Footer field so it loads after your page content.
- Save, then reload your live site with a hard refresh.
Tip
Do not install the same widget both in Code Injection and in a Code Block on the same page — you will end up with two copies of the loader running at once.
Placement tips
- Give the Code Block a full-width section of its own. Squeezed into a narrow column, the booking form gets cramped on tablets.
- Preview on a phone. Squarespace’s mobile styles can add padding that changes how the widget sits.
- Keep one clear call to action per page — a floating button plus an inline widget on the same page competes with itself.
If the widget does not appear
- Blank space where the widget should be. Check the configuration is Published in the Seatingly portal, not saved as a draft.
- The code shows as text. Untick Display Source in the Code Block.
- It works on the live site but not in the editor. That is expected behaviour. Always test the published URL.
- The Code Block is unavailable. Your Squarespace plan does not include custom code. Use the link fallback below.
Once it is live, match it to your template in Customize your booking widget, or read Install the Seatingly booking widget for the full setup overview.
Was this article helpful?
Your answer helps us decide what to rewrite next.
Related articles
Install the Seatingly booking widget
Generate your embed code in the Partner Portal, paste it into your website, and start taking bookings directly on your own pages.
Read articleBooking WidgetAdd the booking widget to Wix
Use Wix’s Embed a Widget or HTML iframe element to place the Seatingly booking widget on your site, and know the plan and sizing limits before you start.
Read articleBooking WidgetCustomize your booking widget
Match the widget to your brand — theme, colours, border radius, button label, language, header and background images, and the Notify Me option.
Read articleStill need a hand?
If a guide did not cover it, a real person on the Seatingly team will. Tell us your business name and what you are trying to do, and we will reply within 12 hours.