How To Add Cal.com to Your Squarespace Website
Integrating Cal.com into your Squarespace website is a powerful way to streamline event scheduling and create a seamless booking experience for your visitors.
Whether you're new to website customization or looking to enhance your existing site, learning how to add an inline button and code block is a valuable skill.
Let’s dive in…
Watch the video
Check out the YouTube video below 👇
To integrate Cal.com into your website, go to the Event Types page on Cal.com. From there, click the three dots on the event you want to embed.
Then click Embed
You will then see several options. In this tutorial, I will cover the inline embed and the floating pop-up button. We'll start with the button, so click on that.
You will then see a window where you can customize the button to your liking on the right side. Once you're satisfied, click Copy Code to copy the code. You'll know it's copied when you see the confirmation message "Code copied."
Now, go over to Squarespace. Click on Website > Pages > Website Tools > Code Injection. You will see a window similar to the one in the image below. In the Header section, paste the code you copied from Cal.com. Click Save, and the button will appear on your website.
Now for the inline embed: follow the same steps on Cal.com by clicking the three dots, selecting Embed, and choosing the Inline Embed option. You can customize it to your liking on the right side. Once you're satisfied, copy the code from Cal.com by clicking the Copy Code button.
Adding this to the site is a bit different. First, find the section where you want the Cal.com embed to appear. In my case, I’ll place it in the hero section. Then, go into the editor and add a Code Block to that section.
From there, the Code Block will be added. Click inside the Code Block and delete the placeholder code. Replace it with the code you copied from Cal.com. Then click Save and exit the editor, and Cal.com will be embedded in the section.
And that’s it! This is how you can embed Cal.com into your Squarespace website, whether as a floating pop-up button or an inline embed.
Your designer
I'm Victor Rolf, an expert Squarespace designer .If you'd like to discuss a potential project, you can email me at victor@rolfmade.com or get in touch here. Alternatively, book a free 15-minute consultation call here.
