How to Add Calendly to Your Squarespace Website
Learn how to add your Calendly link quickly and easily on whatever website you need it on :)
Image of text that says “How to Reveal Text on Hover on Squarespace” with designwithabby.com
This is a super easy tutorial for adding Calendly. I use it and adding it my website makes it easier for people to go straight to it and book a call with me. Plus, Instead of sending people away from your site or juggling emails, you can let them book directly on the page. It’s faster, cleaner, and looks way more professional.
There are a few different ways to integrate Calendly into Squarespace, and you don’t need to be super techy to do it. Enjoy this guide which walks you through step-by-step.
Before we get into it, if you’d prefer to watch and learn then click the video below! And you can check out other cool tutorials and educational videos on my channel. :)
Learn how to reveal text on hover css effect for Squarespace
-
[00:00:00.00]
Hey, everyone. So I want to show you how to add your Calendly link to your website, or maybe it's your client's website on Squarespace. So I have mine set up. This is my website, and I have mine set up to where if you click on Inquire Today, then you're going to go straight to a booking page to where this is easily accessible. You can just pop in whatever time and you can book a discovery call with me. Now, a lot of people like to use this and they don't always know how to embed it straight onto the site. Sometimes it just goes straight to a new tab, right? So what we want to do is make sure that this is ready to go within your site. And so if I go to Edit, and we're going to go into the Edit mode, then you can see that it is an embed block. How you do this is you go to Add section, put a blank section in here, and we're going to add an embed block right here. Then I'll just stretch it out a little bit. What then you're going to want to do is pull up your Calendly page.
[00:01:17.18]
I have my Discover call with Abby right here. This is the one I'm going to use. If you click on three dots right here and you go to Add to Website, you click on Add to Website, then you can do any of these, but I'm going to do this one, inline embed. Click continue. This is the code that we're going to use right here. We're just going to click copy. Now, over here, if you did pay for a higher subscription, you can obviously edit a few things, and then it will change the code so it appears on the site. But I don't have that, so we're just going to use the basic code. We're going to come back here to the site, click on the pencil, click on Code Snippet, and then we're going to paste this code in here. Now, if we click Save and then Exit, and then we go to preview it, then as you can see, I have my first one, and then I have a second one. This one is obviously... It lets you scroll within its box or its frame. If we If you wanted to adjust that, you'd click on Edit, you'd go back into the code.
[00:02:36.16]
If you can see, right here, it says width and then height. If you increase this height to like 900, and we can even try increasing this to maybe like five, just to see what it does. Then let's click Save, Exit, go back to Preview. This is this one still looks. And then this one, obviously, you still can scroll just a little bit, but you get to still see the full thing, whereas this one, you have to scroll a bit more. So this one, I like how there's a little bit more height to it and it doesn't cut off. So this one is probably worth me replacing it up here. And so I can do that later. But as you can see, this is exactly how you would add it from Calendly to your Squarespace site. So if you learned something, go ahead and give this video a like. And if you want, go ahead and subscribe to the channel for more content like this. I'm actually going to be uploading a video soon where I show you how to download multiple files from the Asset Library, even though as of right now, July eighth, 2025, Squarespace doesn't have a native feature to let you download multiple files from the Asset Library.
[00:04:06.25]
So I found a bit of a workaround that I'm excited about. And yeah, it's going to be in the next video. So stay tuned and subscribe to see it. Now, since I'm already on the booking page, I might as well just say that if you are someone that needs a Squarespace website and you don't want to build it yourself, maybe don't know how to build it, or you just... You do, but you don't want to go and spend all the time it takes to make your website, then I completely understand. And that's fine. You can go to designwithabby. Com and go right here and book the call. We can chat about what your goals are, what your vision is, what you need in a website. Maybe you don't know what you need, but you're looking to get some help. And that is what the call is for. So if you want to, no pressure, but feel free. And if you do, then I will see you soon.
Step 1: Prepare Your Calendly Event
Before embedding anything, you need to have your Calendly event link ready. Here’s how to find it:
Log into your Calendly account
Click on the event type you want to embed
Click the "Share" button
Choose “Add to Website”
Calendly will give you three options:
Inline Embed – displays the full calendar right on your page
Popup Widget – adds a floating button that opens the scheduler in a popup
Popup Text – turns a text link into a trigger for the popup
For this tutorial, I’m only going to show up how to do the Inline Embed option. So once you click on that option you will be able to customize the booking page (if you have premium), and copy the code.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Step 2: Embed Calendly on Your Squarespace Site
Inline Embed (Calendar directly on the page)
This method displays your Calendly calendar directly on the page, which makes it super easy for users to book without any extra clicks.
How to do it:
Log into your Squarespace site
Go to the page where you want to embed Calendly
Click "Edit"
Add a Code Block (or Embed Block depending on your version)
Paste in the embed code from Calendly (if Embed block go to Code Snippit)
Click "Save"
You can adjust the calendar’s size by editing the height in the embed code if it looks too short or cut off on the page.
Alternative Option: Link a Button Directly to Your Calendly Page
This is the easiest and most universal method. Just link a button on your site to your Calendly event URL.
How to do it:
Add a Button Block
Link it to your Calendly URL (e.g., https://calendly.com/yourname/15min)
Click "Save"
That’s it! This opens Calendly in a new tab. It’s simple and works on every browser and device.
Tips for a Better Calendly Experience on Squarespace
Style your Calendly embed to match your site’s branding
Use a hidden or test page to experiment before publishing
Always check how the calendar looks on mobile
If speed is important, use links instead of embeds to keep things light
Final Thoughts
Adding Calendly to your Squarespace site makes scheduling simple and professional. Whether you embed it directly or just link to it, both are easy options to make a better experience for your visitors.
Now go embed that calendar and make booking way easier for everyone!
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
Yes. Calendly works on all modern Squarespace versions, including 7.0 and 7.1. The process of embedding your calendar is nearly identical regardless of the version you're using, especially if you use a Code Block or Button Block.
-
It will, but it may not always look great on smaller screens if the height or width isn’t adjusted properly in the embed code. Calendly’s popups (widget or text link) tend to be more mobile-friendly than inline embeds.
-
Absolutely. You can embed different Calendly event types on different pages, use multiple buttons with different links, or even create a booking hub page with several scheduling options.
-
Yes. Calendly offers a free plan that works perfectly for basic scheduling needs. If you want advanced features like multiple event types, team scheduling, or custom branding, you may want to explore one of their paid plans.
-
Kinda! Calendly lets you change things like color and button text within their embed tool. But for deeper customization (like fonts or layout) you'd need to use CSS, which isn’t officially supported in Squarespace without some custom coding.
