3 Ways to Use Calendly with Squarespace + A Video Guide on Branding in Calendly

Calendly is my preferred scheduling software! I absolutely love it and have been using it for close to two years for my business. I use Calendly both for paid and included calls within my process, and I have 12+ meeting types set up within it. I also have it integrated into my website, so my clients find it completely easy to use as well. I use both button links and embeds to create a seamless experience with my branding and scheduling.

Having a scheduling platform is essential in this day and age with running a small business online. Gone are the days of “Are you free this day? No? What about this day? No? How about this?” and missing leads due to failed scheduling. It’s incredibly commonplace now to schedule meetings up front rather than doing that back and forth.

And, due to the pandemic, we’re all meeting virtually (which is amazing!) Calendly helps to also integrate Zoom and other video software seamlessly, making your process super smooth.

Here are a few things I love about Calendly:

  • As with most scheduling platforms, setting custom hours has helped me define boundaries within my business

  • It’s aesthetically pleasing! The user interface is very pretty and easy to use

  • The calendar connection has never once not worked or hiccuped on me. I completely trust it with my life

  • It’s got email reminders and forms included, so I can have clean client workflows

  • I can CHARGE! Having a paid Power Hour is crucial to my success.

If you use Squarespace, you might be wondering how to connect the two, and how they work. Unlike Acuity, which is actually owned by Squarespace, you have to do a few other steps, but I’m here to make them super easy!

 

Video: 3 Ways to Integrate Calendly and Squarespace

 

Text: Integrating Calendly and Squarespace

Method #1: Adding a Link to Your Existing Buttons

This is my favorite option because it allows you to use the beautiful styling of your beautiful existing buttons, and to simply open Calendly in a new window versus a fancy pop-ups. Pop-ups sometimes get challenging and confusing because most websites already have a newsletter pop-up. And, pop-ups don’t perform well on mobile, so they might make it challenging for your users to book with you!

This method simply requires you to grab the link from Calendly and add it to a button in Squarespace.

Steps to add Calendly to Squarespace via button:

  • Go to Calendly and find the meeting type

  • Click “copy link”

  • Go to the page on Squarespace you want, and then click on the button

  • Add your Calendly link to that button

  • Be sure you click on the gear and click “open in new window”

  • Save!

Method #2: Creating a Pop-Up via text or floating button

If the button method isn’t jiving with you, then the pop-up method might work great for you. Calendly gives you two options for pop-ups: the text version and the “sticky button” method. A warning that pop-ups are often hard to navigate on mobile, so if your audience is very mobile-first, this might not be the method for you.

This method requires you to copy code from Calendly and add it to Squarespace. This sounds advanced, but I promise, it truly isn’t!

To do this method, you’ll navigate to your meeting type on Calendly, and click “Share.” You’ll get a few options. For this, you’ll either choose in-line text or a floating button.

Steps to Adding a Calendly Pop-up to Your Squarespace Site:

  • Go to Calendly and find the meeting type

  • Click “Share”

  • Click either the text pop-up or floating button. Follow their instructions, and add a hex code for your colors

  • For text, place the code on the page with the code block

  • For the page pop-up, you’ll go to the page settings and add in the code injection

  • Save!

Method #3: Embedding that Bad Boy Right on the Page

Perhaps you want your actual meeting type to be displayed ON your Squarespace website! This is a great way to prevent your users from clicking too much across your site and focusing on instead booking with you! This method involves using Squarespace’s code block and grabbing that code from Calendly.

I like this method over the pop-up, because it makes it easy for your users to schedule without having to leave the page, BUT, the widget doesn’t always look great on the actual page because it’s an embed.

Steps to Embedding the Calendly Block on your Squarespace Site:

  • Go to Calendly and find the meeting type

  • Click “Share”

  • You’ll want the top option, embedding

  • Adjust the settings and copy the code

  • Put a code block on the page where you want to embed

  • Paste the code

  • You have to save and be out of editing mode to see the widget


Bonus: General Calendly Overview + Where to Brand

Do you want a friendly designer’s take on setting up Calendly? Look no further! I’ve got a bonus custom video on setting up your Calendly and where you can add lots of branding.

Branding is important for brand recognition and to reduce customer confusion. Additionally, it helps your process by making everything transparent and easy: meaning fewer mistakes and questions from your clients! Calendly can be a wonderful tool when all set up correctly.

Video below, but comment if you’ve got any more questions!

 
Previous
Previous

Squarespace vs MailerLite vs FloDesk: Which Email Marketing Platform I Use as a Designer

Next
Next

Tech Talk: The Computers, Microphones, Keyboards, and Hardware I use for my Brand & Web Design Business