Embed a scheduling widget on your website with Cal.com
Embed a scheduling widget on your website with Cal.com
Add seamless scheduling to your site with the Cal.com embed widget. Cal.com currently supports four flexible embedding options: inline embed, floating pop-up button, pop-up via element click, and email embed.
Add seamless scheduling to your site with the Cal.com embed widget. Cal.com currently supports four flexible embedding options: inline embed, floating pop-up button, pop-up via element click, and email embed.
Trusted by fast-growing companies around the world
Trusted by fast-growing companies around the world
Trusted by fast-growing companies around the world
How to embed the Cal.com scheduling widget on your website
How to embed the Cal.com scheduling widget on your website
The Cal.com embed widget is simple to set up and highly flexible. It lets you embed the full scheduling experience into your website, landing page, app, or portal. Users can book directly without ever leaving your site.
The Cal.com embed widget is simple to set up and highly flexible. It lets you embed the full scheduling experience into your website, landing page, app, or portal. Users can book directly without ever leaving your site.
01
Make your event type
Set up your event in Cal.com with your preferred settings and availability.
02
Choose the embed type
Pick a format (inline, pop up, button, or email) and copy the generated code.
03
Adjust your embed and publish
Add the code to your website or app. Your scheduler will be live instantly!
All available embedding solutions to easily schedule meetings
All available embedding solutions to easily schedule meetings
Cal.com provides four powerful ways to embed scheduling into your user experience. Each format is designed for specific use cases, layout needs, and booking flows.
Cal.com provides four powerful ways to embed scheduling into your user experience. Each format is designed for specific use cases, layout needs, and booking flows.
01
Inline embed
Display the booking calendar directly in your page layout. This is the most popular and seamless option for real-time scheduling on your website.
02
Floating pop-up button
Use a persistent button that triggers a scheduling modal. Boosts conversion without disrupting your website page design.
03
Pop-up via element click
Link the embed to a custom element like a button or image. Control exactly how and when users start the booking process.
03
Email embed
Add personalized booking links in email campaigns that open a pre-filled booking form. Ideal for outreach and follow-ups.
White-label the scheduling widget by using our booker atom
White-label the scheduling widget by using our booker atom
For teams that need full control over the booking experience, Cal.com offers complete customization of the booker component using platform atoms. Developers can modify individual parts of the booking UI or rebuild the entire booking flow using modular, open components.
For teams that need full control over the booking experience, Cal.com offers complete customization of the booker component using platform atoms. Developers can modify individual parts of the booking UI or rebuild the entire booking flow using modular, open components.
1
// Style Atoms with Javascript
2
3
const appearance = {
4
theme : Custom ,
5
variables : {
6
fontFamily : ' Comic sans ' ,
7
colorPrimary : ' #101010 ' ,
8
colorBackground : ' #ffffff ' ,
9
colorText : ' #374151 ' ,
10
borderRadius : ' 6px ' ,
11
spacingUnit : ' 8px ' ,
12
}
13
} ;
14
const atoms = cal.atoms ( { clientSecret , appearance } ) ;
15
Cédric van Ravesteijn
Why Cal.com is better than Calendly
Ready to see why Cal.com outshines Calendly? Spoiler alert: it’s not even close!
15m
30m
45m
1h
Cal Video
Europe/Amsterdam
May
2025
SUN
MON
TUE
WED
THU
FRI
SAT
0
15
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
0
Cédric van Ravesteijn
Why Cal.com is better than Calendly
Ready to see why Cal.com outshines Calendly? Spoiler alert: it’s not even close!
15m
30m
45m
1h
Cal Video
Europe/Amsterdam
May
2025
SUN
MON
TUE
WED
THU
FRI
SAT
0
15
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
0
Key benefits to embed a scheduling widget with Cal.com
Key benefits to embed a scheduling widget with Cal.com
Embedding Cal.com directly into your site improves the user experience, increases conversion rates, and gives you more control over the booking journey.
Embedding Cal.com directly into your site improves the user experience, increases conversion rates, and gives you more control over the booking journey.
01
Increase website conversions with embedded scheduling
Keep users on your site and reduce booking drop off. Cal.com embeds offer a faster, more intuitive way to convert visitors into meetings.
02
Match your brand with customizable embed formats
Use inline embeds, pop ups, or buttons to align with your site layout and branding. Customize colors and styles to create a seamless experience.
03
Fast setup and complete control
Generate your embed code, paste it into your site, and go live. You manage the full booking flow from start to confirmation without sending users away.
Powerful scheduling embed features for developers and teams
Powerful scheduling embed features for developers and teams
The embed system includes advanced features for technical users and teams that need full customization and integration capabilities.
The embed system includes advanced features for technical users and teams that need full customization and integration capabilities.
Dynamic embed snippet generator
Generate code tailored to your Cal.com setup, including support for teams, self-hosted environments, and advanced routing.
Multiple embed formats
Choose between inline views, buttons, or modals based on how you want to trigger the booking flow.
Add or limit available time slots
Show only specific time slots in an embed based on the context or user type. Control availability without changing your core event settings.
Prefill booking form fields
Use query parameters to automatically prefill name, email, or custom fields for a faster and more personalized booking experience.
Track UTM parameters in embeds
Embed captures UTM source, medium, campaign and other values so you can attribute bookings to the right channels.
Mobile-optimized out of the box
Every embed is responsive and works across screen sizes. No additional setup is needed for mobile users.
See how to embed a booking widget on your website
See how to embed a booking widget on your website
See how fast it is to embed Cal.com on any website. This quick video walks through setup, configuration, and real examples.
See how fast it is to embed Cal.com on any website. This quick video walks through setup, configuration, and real examples.
See how fast it is to embed Cal.com on any website. This quick video walks through setup, configuration, and real examples.
All your key tools in-sync with your meetings
Cal.com works with all apps already in your flow ensuring everything works perfectly together.
All your key tools in-sync with your meetings
Cal.com works with all apps already in your flow ensuring everything works perfectly together.
All your key tools in-sync with your meetings
Cal.com works with all apps already in your flow ensuring everything works perfectly together.
Frequently asked questions about Cal.com embed
Frequently asked questions about Cal.com embed
These are some of our most frequently asked questions.
These are some of our most frequently asked questions.
What is Cal.com embed?
Cal.com Embed allows you to integrate a fully functional scheduling widget directly into your website or app, enabling users to book appointments without leaving your site. You can embed the widget as an inline calendar, a floating pop-up button, a pop-up triggered by a specific element click, or a link in your emails. This seamless integration enhances the user experience and improves booking conversion rates by keeping visitors engaged on your page.
How do I embed Cal.com on my site?
Embedding Cal.com on your website is simple. First, create your event type and configure its settings and availability in the Cal.com dashboard. Once your event is set up, go to the Embed Snippet Generator in your dashboard, select your preferred embed format (inline, floating button, click-triggered pop-up, or email embed), and copy the generated code. Then, paste the code directly into your HTML, CMS, or frontend framework. Your booking widget will be live and ready for use immediately, fully synced with your Cal.com account.
Can I track marketing campaigns with embedded bookings?
You can manually append UTM tracking parameters to the embed URLs. This allows you to track source, medium, campaign, and other key parameters when users interact with the booking widget. By passing UTM parameters via the link, you can attribute bookings to specific marketing efforts, campaigns, or traffic sources.
Can I prefill user info in the booking form?
Yes, you can prefill fields in the booking form using URL query parameters. This means you can automatically populate fields like the user's name, email, or any custom fields you've set up. For example, you can send a personalized booking link in an email that already has the user's name and email prefilled. This makes the booking process faster and more user-friendly, reducing friction and improving conversion rates. Learn more about pre-filling forms in our documentation.
What embed formats are supported?
Cal.com supports four key embed formats to suit various needs:
Inline Embed: Display the calendar directly within your page layout for seamless user interaction.
Floating Pop-up Button: Add a persistent button that triggers the booking modal without disrupting the page layout.
Pop-up via Element Click: Trigger the scheduling modal from any custom element, like a button or image.
Email Embed: Include a pre-filled booking form link within your emails for easy and personalized scheduling.
Each format is designed to provide flexibility in how you display and interact with your scheduling system, depending on your website design and user flow.
Can I control which time slots show in an embed?
Yes, you can fully customize the booker UI using Cal.com’s booker atom. The booker atom is an open-source, modular component that lets you build and style your own booking flow. You can adjust the layout, replace form fields, or completely redesign the booking experience to match your brand’s look and feel. By using individual booker atoms like DatePicker, TimeSelector, and ContactForm, you can have fine-grained control over each element of the booking process. This gives you the flexibility to create a tailored and branded experience within your app or website. For more details, visit our booker atom documentation.
Does embed work with self-hosted Cal.com?
Yes, the embed feature works with both cloud-hosted and self-hosted Cal.com setups. Whether you're using Cal.com’s hosted version or deploying it on your own infrastructure, the embed functionality remains fully operational. Snippet generation is dynamically scoped based on your setup, and you can configure it to work seamlessly within your self-hosted environment.
What is Cal.com embed?
Cal.com Embed allows you to integrate a fully functional scheduling widget directly into your website or app, enabling users to book appointments without leaving your site. You can embed the widget as an inline calendar, a floating pop-up button, a pop-up triggered by a specific element click, or a link in your emails. This seamless integration enhances the user experience and improves booking conversion rates by keeping visitors engaged on your page.
How do I embed Cal.com on my site?
Embedding Cal.com on your website is simple. First, create your event type and configure its settings and availability in the Cal.com dashboard. Once your event is set up, go to the Embed Snippet Generator in your dashboard, select your preferred embed format (inline, floating button, click-triggered pop-up, or email embed), and copy the generated code. Then, paste the code directly into your HTML, CMS, or frontend framework. Your booking widget will be live and ready for use immediately, fully synced with your Cal.com account.
Can I track marketing campaigns with embedded bookings?
You can manually append UTM tracking parameters to the embed URLs. This allows you to track source, medium, campaign, and other key parameters when users interact with the booking widget. By passing UTM parameters via the link, you can attribute bookings to specific marketing efforts, campaigns, or traffic sources.
Can I prefill user info in the booking form?
Yes, you can prefill fields in the booking form using URL query parameters. This means you can automatically populate fields like the user's name, email, or any custom fields you've set up. For example, you can send a personalized booking link in an email that already has the user's name and email prefilled. This makes the booking process faster and more user-friendly, reducing friction and improving conversion rates. Learn more about pre-filling forms in our documentation.
What embed formats are supported?
Cal.com supports four key embed formats to suit various needs:
Inline Embed: Display the calendar directly within your page layout for seamless user interaction.
Floating Pop-up Button: Add a persistent button that triggers the booking modal without disrupting the page layout.
Pop-up via Element Click: Trigger the scheduling modal from any custom element, like a button or image.
Email Embed: Include a pre-filled booking form link within your emails for easy and personalized scheduling.
Each format is designed to provide flexibility in how you display and interact with your scheduling system, depending on your website design and user flow.
Can I control which time slots show in an embed?
Yes, you can fully customize the booker UI using Cal.com’s booker atom. The booker atom is an open-source, modular component that lets you build and style your own booking flow. You can adjust the layout, replace form fields, or completely redesign the booking experience to match your brand’s look and feel. By using individual booker atoms like DatePicker, TimeSelector, and ContactForm, you can have fine-grained control over each element of the booking process. This gives you the flexibility to create a tailored and branded experience within your app or website. For more details, visit our booker atom documentation.
Does embed work with self-hosted Cal.com?
Yes, the embed feature works with both cloud-hosted and self-hosted Cal.com setups. Whether you're using Cal.com’s hosted version or deploying it on your own infrastructure, the embed functionality remains fully operational. Snippet generation is dynamically scoped based on your setup, and you can configure it to work seamlessly within your self-hosted environment.
Don’t just take our word for it
Our users are our best ambassadors. Discover why we're the top choice for scheduling meetings.
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
Don’t just take our word for it
Our users are our best ambassadors. Discover why we're the top choice for scheduling meetings.
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
Don’t just take our word for it
Our users are our best ambassadors. Discover why we're the top choice for scheduling meetings.
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
"More elegant than Calendly, more open than SavvyCal, Cal.com works and it feels just right."
Flo Merian
Product Marketing, Mintlify
I think Cal.com has a very good chance of creating a new category around being both great and well designed."
Guillermo Rauch
CEO, Vercel
"I just migrated from Calendly to Cal.com."
Kent C. Dodds
Founder of EpicWeb.dev
"Just gave it a go and it's definitely the easiest meeting I've ever scheduled!"
Aria Minaei
CEO, Theatre.JS
"I finally made the move to Cal.com after I couldn't find how to edit events in the Calendly dashboard."
Ant Wilson
Co-Founder & CTO, Supabase
Trusted by fast-growing companies around the world
Trusted by fast-growing companies around the world
Trusted by fast-growing companies around the world
Embed an online booking widget into your website instantly with Cal.com
Start embedding scheduling into your site today. No plugins or redirects. Just clean, fast, high-converting booking.
Cal.com® and Cal® are a registered trademark by Cal.com, Inc. All rights reserved.
Our mission is to connect a billion people by 2031 through calendar scheduling.
English
Need Help? support@cal.com or visit cal.com/help.
Solutions
Use Cases
Resources
Cal.com® and Cal® are a registered trademark by Cal.com, Inc. All rights reserved.
Our mission is to connect a billion people by 2031 through calendar scheduling.
English
Need Help? support@cal.com or visit cal.com/help.
Solutions
Use Cases
Resources
Cal.com® and Cal® are a registered trademark by Cal.com, Inc. All rights reserved.
Our mission is to connect a billion people by 2031 through calendar scheduling.
English
Need Help? support@cal.com or visit cal.com/help.
Solutions
Use Cases
Resources