The whole idea behind Cal.com's open-source scheduling infrastructure is to make meeting people easier. We do this by providing an accessible and customizable tool suite that takes the back-and-forth out of booking appointments online and in person. Naturally, you can share your Cal.com profile by sending a link via email, text, or direct message. However, we also have options that allow you to seamlessly add Cal.com to your website.
The types of embeds we offer
Cal.com offers three types of embedding options, each accessible via your events customization dashboard. You can generate a different embed for each meeting type. Controlling embeds on a per-event basis also means that you can create separate booking pages for hidden and public events. This is useful if you only have appointment types for internal teams or clients with specific subscriptions.
There are three different ways to embed events on your website; you can add the event as an inline embed, a pop-up button, or a pop-up via element click. Each has slightly different strengths.
The inline embed is simple and straightforward - it’s what most people think of when they imagine embedding a calendar onto the website. When you add the code for the inline embed to your website, it will generate a calendar with a short description of the event and available booking slots.
The pop-up button option is slightly different. When you embed the pop-up button, it will generate a button that floats on the designated web page and only opens up a booking interface once it's clicked on.
Our most unique embedding option is the pop-up triggered by an element click. When a visitor clicks on an aspect of your website's calendar booking, a pop-up with time slots will appear, allowing them to select a preferred meeting time.
Easy customization options
All of our embed options are customizable via a no-code user interface, making it easy to change things like the brand color and theme you would like to apply to the pop-up. In addition, the Embed Customization UI also comes with a preview tab which you can use to verify your choices. Once you've finished customizing your embed code, you can export it as either HTML or React Code.
How to Add an Embed to Your Website
Login to your Cal.com account
Go to your event dashboard
Select the event you would like to embed on your website
Click on the blank symbol
Choose the type of embed you would like to use
Make your desired customizations
Copy your preferred code
Visit your website
Paste your code into the designated space or module
Finally, save and publish the changes that you've made to your website
Cal.com has been designed so that the product is equally usable and extendable by both developers and no-code aficionados. This is an approach that we've taken to ensure that the product is usable by everyone, regardless of their formal background or skill level. Adding a Cal.com booking page to your website is an easy way to save time, reduce stress levels, and optimize your workflow.
