Option 1: Square’s button in a code block
- Open your booking channels. Square Dashboard > Appointments > Online Booking > Channels.
- Choose how to add it. Under “Add your booking flow to an existing site,” click Get Started, then Create button, Get embed code or Get URL.
- Copy the code or link. Pick the location, customize the button if you made one, and copy.
Square’s embed opens the booking flow “in another tab or window,” so the booking itself happens on Square’s page, not yours. That is fine for a simple site. If you want booking to stay on your page in your design, use the Foyer widget below.
Paste it into Squarespace
- Edit the page. Hover over a section and click Add block, then Code.
- Click the pencil on the block. Set Mode to HTML, turn Display Source off, and paste.
- Save and check the live page. Squarespace says code “sometimes doesn’t appear while you’re logged in,” so check in a private window.
Option 2: the Foyer widget on Squarespace
The Foyer widget books into Square Appointments from your own page, as a popup with a floating Book button or inline inside a page, with deposits, member prices, packages and promo codes. Your install code comes from the Foyer dashboard with your ID filled in:
<script src="https://app.foyerkit.com/widget.js" data-merchant="your-id" async></script>Floating Book button on every page
- Open the Pages panel. Click Custom Code at the bottom, then Code Injection. On 7.0 sites it is under Website Tools.
- Paste into Footer. Squarespace adds Footer code before the closing body tag on every page.
- Click Save. Then turn any button on your site into a booking button by linking it to
#book.
Inline on one page
Add a code block in HTML mode where you want booking and paste your Foyer code set to inline mode.
Which Squarespace plan you need
| Basic | Core, Plus, Advanced | |
|---|---|---|
| Code block with HTML | Yes | Yes |
| JavaScript or iframes in a code block | No | Yes |
| Code Injection (every page) | No | Yes |
Squarespace: “To add JavaScript or an iframe to a code block, your site needs to be on the Core, Plus, or Advanced plan.” Square’s plain button link works on Basic; embed code and the Foyer widget need Core or above.
Sources, checked October 9, 2026: Squarespace: code injection, Squarespace: code blocks, Acuity: Square payments, Square: client-facing booking tools.
Squarespace Scheduling, Acuity and Square
Squarespace’s help center says “Squarespace Scheduling is now officially Acuity Scheduling.” Acuity can use Square to process payments, but it keeps its own calendar: it doesn’t sync with Square Appointments. If your team runs the day in Square, keep Square as the calendar and add booking to Squarespace with code.