Add a booking widget to Squarespace in 3 minutes

What you need

• Any Squarespace plan that supports Code Blocks (Personal, Business, Commerce — all do).
• A Google account (the one whose calendar should receive bookings).
• The snippet above — paste-ready.

Step 1 — Sign up for circleit and connect Google Calendar

Go to circleit.app, sign up with the Google account whose calendar you want to receive bookings. Pick a short username (you can change it once). The OAuth consent screen asks for two scopes: read your free/busy times and create/manage events that circleit itself creates. That's it — circleit never sees your event titles or attendees of other events.

Step 2 — Set your availability and event types

In the dashboard, set your weekly hours (e.g., Mon–Fri 9am–5pm), then add one or two event types (e.g., "30-minute intro call," "60-minute consultation"). Each event type gets its own slug, like intro or consult.

Step 3 — Add a Code Block to your Squarespace page

1. Log in to Squarespace and open the page where you want the widget (Contact page is a great default).
2. Click an empty insert point. A row of icons appears — click More, then Code.
3. A Code Block opens. Make sure the language dropdown is set to HTML and the "Display Source" checkbox is NOT checked.
4. Paste this snippet (with your real username instead of your-username):

The widget appears on the page within seconds. You can drag the Code Block anywhere — inside columns, between paragraphs, in a sidebar. Click Save to publish.

Inline vs. floating button

The default snippet drops a floating "Book a call" button in the bottom-right of every page that has the Code Block. If you'd rather have the calendar appear inline where the block sits, add data-mode="inline":

<script src="https://circleit.app/embed.js"
        data-circle="your-username"
        data-mode="inline"></script>

Common Squarespace gotchas

• The widget shows on every page. That's because Squarespace applies the Code Block to the single page. To put it on multiple pages, paste the snippet into each one. (Putting it in the site footer is also possible but typically not what you want.)
• The widget looks tiny in the editor. Squarespace's editor sandbox restricts script execution previews. The widget renders correctly once you click "Save" and view the live page.
• Custom CSS is overriding the widget. Rare, but if your Squarespace template has aggressive global CSS, the widget can inherit unwanted styles. The widget uses an iframe specifically to avoid this on its booking flow, but the button trigger sits on your page. If you see weirdness, email us a screenshot.

What your customer sees

A clean booking flow: pick an event type → pick a date → pick a time (in their timezone, not yours) → enter name + email + optional notes → done. They get a confirmation email with a calendar invite and cancel/reschedule links. You get a notification email and the event drops into your Google Calendar.

Troubleshooting

• Widget doesn't show up: Verify "Display Source" is UN-checked in your Code Block. If checked, Squarespace will display the code as text instead of running it.
• "Username not found" error: Double-check the data-circle value matches the username you picked at signup. Lowercase, alphanumeric + hyphens only.
• Calendar shows no available times: Make sure you've added availability rules in the dashboard and that your event type is active.