Calendly and Squarespace work together in four ways: an inline calendar embedded on a page with a Code or Embed block, a floating button in the corner of every page that opens the calendar in a popup, a text link that opens the same popup, and a plain Squarespace button linked to your Calendly URL, which needs no code at all. The first three come from Calendly’s “Add to website” menu; all you do in Squarespace is paste. The choice between them is mostly about where the booking should sit in the visitor’s journey, and the one decision that matters more than placement is whether you should be on Calendly at all, because Squarespace’s own Acuity Scheduling handles paid appointments and intake forms in a way Calendly’s free tier does not. Below: the four methods with steps, the plan requirements, the branding and tracking settings, and the Calendly-or-Acuity comparison.
Calendly and Squarespace: which embed should you use?
| Method | Where it appears | Best for | Squarespace requirement |
|---|---|---|---|
| Inline calendar | A booking page or section, calendar visible without clicking | A dedicated “Book a call” page; consultations as the main call to action | Code or Embed block on any plan; JavaScript rendering needs Core or higher |
| Floating popup button | Bottom corner of every page | Coaches, consultants and anyone whose whole site sells a call | Code Injection, which needs Core or higher; page-level injection is part of the same premium feature |
| Popup text link | Inside a sentence, anywhere | Blog posts and service pages: “Have a question? Book a call” | Code or Embed block |
| Plain button with the Calendly link | Any Button block | The no-code route; the visitor leaves the site for Calendly | Any plan |
Collaborada’s four-method guide is the fuller version of that table, with examples of each on a live site; Calendly’s own Squarespace help page covers the inline embed and the one fix for embeds that do not render.
How do you embed the Calendly calendar on a Squarespace page?
- In Calendly, open Event Types, click the three dots (or Share) on the event, and choose Add to website.
- Choose Inline Embed. Set the colours to match the site, optionally hide the event details and cookie banner, and click Copy code.
- In Squarespace, edit the page, click Add Block, choose Code (or Embed), and paste the code.
- Save. If a scrollbar appears inside the calendar, edit the
heightvalue in the pasted code (700 to 900 pixels suits most event types). - If nothing appears on the live site, add Calendly’s Squarespace helper script to the Code Injection panel’s Header field (search “code injection” in the Home menu; Calendly’s own guide lists it under Settings, Advanced):
<script src="https://calendly.com/assets/external/calendly-squarespace.js"></script>.
Code blocks exist on every plan, but rendering JavaScript in them needs the Core plan or higher, and Calendly’s embed is JavaScript. On the Basic plan, use the plain-button method.
How do you add the floating Calendly button to every page?
- In Calendly’s Add to website menu choose Popup Widget, set the button text and colour, and copy the code.
- In Squarespace, open the Code Injection panel (search “code injection” in the Home menu) and paste it into the Header field. Save.
- For one page only, paste it into that page’s settings, Advanced, Page Header Code Injection instead.
- To move the button to the left corner, add to Custom CSS:
.calendly-badge-widget { right: auto !important; left: 20px !important; }.
Keep the button off pages where it competes with a more important action, such as a checkout or a contact form; the popup post covers the same restraint for newsletter popups.
The no-code method: a button that opens Calendly
Copy the event’s Calendly link (calendly.com/yourname/event) and paste it as the URL of any Button block, with “Open in new tab” on. The visitor books on Calendly’s page rather than yours, which is a fair trade on the Basic plan or for a single call-to-action. Add UTM parameters to the link (?utm_source=website&utm_medium=button) and Calendly reports which bookings came from the site.
Settings worth changing before you paste
- Colours: set the background, text and button colours in Calendly’s embed panel to the site’s palette; a white Calendly box on a dark section looks bolted on.
- Hide event details when the surrounding page already explains the call.
- Hide the cookie banner if your site already shows one; Calendly’s embed can show its own inside the frame.
- Prefill name and email when the embed sits on a thank-you page after a form; Calendly supports URL parameters for it.
- Buffer times, limits and confirmation emails live in Calendly, not on the site; set them before the embed goes live so the first booking does not land at 7am.
Calendly or Acuity Scheduling?
| Calendly | Acuity Scheduling (Squarespace) | |
|---|---|---|
| Free tier | Yes: one event type, unlimited bookings | No; paid plans only, though Squarespace bundles trials |
| Payments at booking | Paid plans, via Stripe or PayPal | Built in, with deposits, packages and gift certificates |
| Intake forms | Basic questions on paid plans | Detailed forms per appointment type |
| Squarespace integration | Embed code | Native Scheduling block, shared contacts and billing |
| Team scheduling, round robin | Strong | Available on higher tiers |
| Best for | Free discovery calls, sales calls, teams sharing calendars | Paid appointments: therapists, salons, consultants selling sessions |
For a free consultation call, Calendly’s free plan is hard to beat. For anything the client pays for at booking, Acuity’s native block, deposits and intake forms usually justify its price, and it keeps bookings and site contacts in one place. Either way, the booking link belongs on the pages where the decision happens: the service page and the contact form, and the coming soon page if you are taking calls before launch.
Why is the Calendly embed not working?
| Symptom | Cause | Fix |
|---|---|---|
| Blank space where the calendar should be | JavaScript not rendered on the plan, or an ad blocker | Upgrade to Core, or use the plain-button method; test in a private window |
| Calendar shows in editor, not live | Cache | Hard refresh; wait a minute |
| Scrollbar inside the calendar | Height too small | Increase the height in the embed code |
| Floating button missing on some pages | Injected on one page only | Move the code to site-wide Code Injection |
| Button style does not match | Calendly’s default colours | Set colours in the embed panel or override with CSS |
| Embed loads slowly | Calendly’s scripts | Normal; keep it off the home page hero and put it on a booking page |
Calendly is one of the two or three embeds that appear on almost every Squarespace site I build for a service business, and the inline version on a dedicated booking page is the setup that converts best, because the visitor never leaves the site and never wonders whether the link was safe.
Frequently asked questions
Yes. In Calendly choose Add to website on an event type, copy the inline, popup widget or popup text code, and paste it into a Code or Embed block (or Code Injection for the site-wide button) in Squarespace. Or link any Squarespace button to your Calendly URL with no code.
The plain button linking to your Calendly page works on any plan. The embedded calendar and popup widget are JavaScript, which Code blocks only render on the Core plan or higher.
Copy the Popup Widget code from Calendly and paste it into the Code Injection panel’s Header field. For a single page, use that page’s Page Header Code Injection. Both need the Core plan or higher.
Usually the plan does not render JavaScript in Code blocks, or a browser extension is blocking it. Calendly also provides a helper script to paste in Code Injection if the embed fails to load.
Calendly for free discovery and sales calls, especially with a free plan. Acuity Scheduling for paid appointments, deposits, intake forms and a native Squarespace block.
Yes. Add UTM parameters to the Calendly link or use the embed’s tracking options, and Calendly’s reporting shows the source of each booking.
