Over the years, we’ve used and trialed many different booking and scheduling tools, but for almost a decade Calendly has stood out as our favorite. We rely on it for scheduling quick calls and paid consultations on our own website, and appreciate the calendar’s seamless experience for both users and administrators. Due to frequent questions about our Calendly setup, we’ve detailed the four ways to add Calendly to Squarespace below with examples.

You can use Calendly on any Squarespace website because Embed blocks are available on all Squarespace plans. You can also use Code blocks.

How to Embed Calendly on Squarespace:

1. Open your Calendly account and ensure you are on the Event Types tab.

2. Locate the event type you want to embed, and click the Share button on the card.

3. Click Add to Website. From here you’ll choose from the 3 methods Calendly offers or style your own button on Squarespace—see below for further details on the 4 options and how to add the Calendly code widget to Squarespace.

Note: When copying any of the Calendly integration options, you can set colors for cohesive branding or choose to hide their cookie banner and/or the event details. See below for more information on these embed options.

1. Calendar on Page (Inline Embed)

Integrating a full calendar to create a scheduling page is the most common method we see clients use. This lets you send clients directly to a page on your website versus sending them to a Calendly URL. On Calendly, choose Inline Embed and click Copy Code, then on Squarespace, add a Code or Embed Block to your desired page and paste the code. If a scroll bar appears, you can adjust the height in the code you copied. Here’s an example:

2. Floating Button (Popup Widget)

To create a floating button like you see in the bottom right corner of our site below, choose Popup Widget and click Copy Code. You can edit the copied code to change the button text or color. When the button is clicked it opens a popup overlay calendar. On Squarespace, you can display this button on individual pages or site wide:

• For a button on every page: Visit Settings > Developer Tools > Code Injection > paste the code in the Header portion. Note, this site wide option is only available on a Business plan or higher, as it requires access to the custom code area.

• For individual pages: Visit Page Settings > Advanced > paste the code into Page Header Code Injection. If you don’t have access to custom code, place an Embed block somewhere on the desired page.

• To left align: By default the button will appear in the bottom right corner. To left align the button, add this CSS:

.calendly-badge-widget { right: auto !important; left: 20px !important; } 

3. Text Link (Popup Text)

This option creates a simple text link that when clicked opens an overlay popup calendar. On Calendly, choose Popup Text and click Copy Code, then on Squarespace, add a Code or Embed Block to your desired page and paste the code. You can adjust the text wording in the code. Here’s an example:

4. Custom Calendly Button

If you want Calendly to popup on a button click versus text link, you can create a custom Calendly button. Simply take the Popup Text code you copied above and add a CSS class. If desired, you can use a class name of a button already on your site or you can style the button with new CSS. On our training pages you’ll also see examples of Calendly buttons integrated into pricing tables. Example of a custom button:

Code for Calendly Button:

<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/YOUR-URL'});return false;" class="NAME">BUTTON TEXT</a>

Branding and Cookie Banner

When initially copying the embed codes above, Calendly provides easy toggles for adjusting colors and other options. But if you want to update an existing code block already on your website, you can simply add the following URL parameters. Use a “?” with the first parameter, then an “&” with any additional pararmeters.

• Cookie Banner: By default, Calendly displays a cookie banner that keeps you compliant with privacy regulations (GDPR, CCPA, etc.). If your website’s privacy policy and terms of use include Calendly, you can hide Calendly’s cookie banner. On mobile or smaller calendar widows, the cookie banner can interfere with user experience, so you might find it is worth addressing.

To remove the banner from an existing code block, add ?hide_gdpr_banner=1 after your Calendly URL. For example:

https://calendly.com/YOUR-URL?hide_gdpr_banner=1

• Event Details: If your calendar web page already has detailed information, you can reduce duplicate information on the embed by hiding the Calendly event’s picture, name, duration, location, and description.

To remove the extra details, add ?hide_event_type_details=1 after your Calendly URL. For example:

https://calendly.com/YOUR-URL?hide_event_type_details=1

Note, if you are integrating your main landing page that displays all of your visible events/calendars, use this parameter: ?hide_landing_page_details=1

• Hide both the Cookie Banner and Event Details: To hide both sets of information, use an “&” between the parameters:

?hide_event_type_details=1&hide_gdpr_banner=1

• Brand Colors: To update a calendar with your brand colors, insert the appropriate hex codes:

&background_color=eeeeee
&text_color=374e57
&primary_color=518b8f (button and link color)

Testing and Troubleshooting

The Calendly widget is responsive and designed to work well on all devices, but it is a good idea to test your calendars on both desktop and mobile from a user experience perspective.

If you have issues on a Squarespace 7.0 site, visit Site Styles to disable Ajax. For any other issues, see Calendly’s troubleshooting tool.

Conclusion

If you use Calendly with Squarespace for scheduling meetings or services, we recommend embedding your calendar(s) directly on your website using one of the methods above. This provides a seamless, branded booking experience for your site visitors. Using a mere text link to redirect to your calendar distracts from the overall user experience.

DIY Squarespace site?

Benefit from our expertise with impactful site reviews and tailored training.
Explore customer reviews.