Calendly Squarespace Integration

Method 1: Inline Embed (Full Scheduler on Page)

How to Set Up

Log in to your Calendly account, go to the event type you want to embed, and click Share. Select "Add to Website" and choose "Inline Embed." Calendly generates a code snippet with a div container and a script tag. Copy the entire snippet.

In your Squarespace editor, navigate to the page where you want the scheduler. Add a Code Block, paste the Calendly embed code, set the display mode to HTML, and save. The full Calendly scheduler - with date selection, time slots, and booking form - appears directly on your page.

When to Use Inline Embeds

Inline embeds work best on dedicated booking pages where the scheduler is the primary content. The full calendar takes up significant vertical space, so it fits naturally on a page designed for scheduling rather than squeezed between other content sections. For a complete walkthrough of Calendly on Squarespace, our guide to integrating Calendly with Squarespace covers all three methods in detail.

Method 2: Popup Widget (Floating Button)

How to Set Up

In Calendly, go to Share > Add to Website > Popup Widget. Customize the button text, color, and position. Copy the generated code. Paste it into Settings > Advanced > Code Injection > Footer in Squarespace (for a site-wide floating button) or into a Code Block on a specific page.

When to Use Popup Widgets

The popup widget adds a persistent floating button (typically in the bottom right corner) that opens the Calendly scheduler in an overlay when clicked. This is ideal when you want booking available on every page without taking up page real estate. The widget stays visible as visitors scroll, making it always accessible.

Method 3: Button Link (Direct to Calendly)

How to Set Up

The simplest integration is a Squarespace Button Block that links directly to your Calendly scheduling page. Create a Button Block, set the link to your Calendly URL (calendly.com/yourusername/event-type), and label it "Book Now" or "Schedule a Call." This sends visitors to Calendly's hosted page for booking.

When to Use Button Links

Button links work on every Squarespace plan (no Code Block needed) and are the fastest to set up. The trade-off is that visitors leave your site to complete the booking. For businesses where the simplicity outweighs the redirect, this is the most practical option.

Customizing Calendly on Squarespace

Matching Colors to Your Brand

Calendly's embed settings let you customize the primary color of the scheduler to match your Squarespace site. Set the color in Calendly's Share > Embed settings before copying the code. For additional styling, use Custom CSS in Squarespace to adjust the embed container's width, padding, and borders. For CSS techniques, our guide to adding custom CSS to Squarespace covers styling embedded elements.

Responsive Sizing

Calendly embeds are responsive by default, but you may want to constrain the width on wide Squarespace templates. Wrap the embed code in a container div with max-width: 700px; margin: 0 auto; to center it and prevent it from stretching too wide on desktop screens.

Hiding Calendly Branding

Calendly's free plan displays Calendly branding on the scheduler. Paid plans (Professional and above) allow you to remove the branding for a cleaner, white-label experience that looks like a native part of your Squarespace site.

Calendly Configuration for Best Results

Event Type Setup

Create specific event types for each service you offer - "30-Minute Consultation," "60-Minute Strategy Session," "Discovery Call." Each type has its own duration, description, and availability settings. Visitors select the event type that matches their need before choosing a time.

Availability and Buffer Time

Set your weekly availability in Calendly to match your actual schedule. Add buffer time between appointments (15 to 30 minutes) to prevent back-to-back bookings. Set minimum scheduling notice (how far in advance someone must book) and maximum scheduling range (how far into the future bookings are available).

Intake Questions

Add custom questions to the booking form - ask about the visitor's goals, their business, or what they want to discuss. This gives you context before the meeting and helps you prepare. Keep questions short - one to three questions is optimal. More than that reduces booking completion rates.

Confirmation and Reminders

Calendly sends automatic confirmation emails and calendar invites. Configure reminder emails (24 hours and 1 hour before) to reduce no-shows. On paid plans, you can also add SMS reminders and custom follow-up emails. For broader scheduling strategy, our guide to customizing your Squarespace website covers integrating booking into your site's conversion flow.

Where to Place Calendly on Your Squarespace Site

Dedicated booking page: Create a "Book Now" page in your navigation with the inline Calendly embed as the main content. This is the most common and most effective placement.

Service pages: Add a Calendly embed or booking button at the bottom of each service page so visitors can book immediately after reading about the service.

Contact page: Replace or supplement your contact form with a Calendly embed. Instead of filling out a form and waiting for a response, visitors book a specific time immediately.

Homepage CTA: Add a "Book a Free Consultation" button on your homepage linking to your Calendly page or opening the popup widget. For CTA placement strategies, our Squarespace design tips guide covers conversion-focused layout design.

Calendly vs. Acuity Scheduling on Squarespace

Calendly is simpler, faster to set up, and works well for businesses with straightforward booking needs - consultations, calls, and meetings. It excels at individual scheduling with a clean, minimal interface.

Acuity Scheduling (owned by Squarespace) offers deeper integration with the platform, more complex scheduling options (group classes, packages, recurring appointments), and built-in payment collection. It is better for businesses with complex booking needs. For Acuity details, our guide to Acuity Scheduling Squarespace integration covers the full setup.

Choose Calendly for simplicity. Choose Acuity for complexity. Both integrate well with Squarespace.

Troubleshooting Calendly on Squarespace

Embed Not Displaying

Verify the Code Block is set to HTML mode. Check that you pasted the complete embed code including the script tag. Try in an incognito window - browser extensions can block third-party scripts. For SEO considerations on booking pages, our Squarespace SEO guide covers optimizing conversion-focused pages.

Scheduler Shows Wrong Availability

Check your Calendly availability settings and time zone configuration. If you recently changed time zones, update the setting in Calendly. Also verify your calendar sync - if Google Calendar or Outlook is connected, existing events block availability in Calendly.

Embed Looks Too Wide or Too Narrow

Wrap the embed code in a container div with a max-width value. For most Squarespace layouts, max-width: 700px; margin: 0 auto; creates a centered, well-proportioned scheduler. Test on mobile to ensure it adapts to smaller screens.

Let Your Website Handle Your Scheduling

Calendly integration turns your Squarespace site into a self-service booking platform. Visitors see your availability, pick a time, and receive confirmation - all without a single email from you. Whether you use an inline embed, a popup widget, or a simple button link, the result is the same: fewer scheduling emails and more booked appointments.

Set up your event types, configure availability, embed the scheduler on your key pages, and let your website do the scheduling work for you.