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.
Alex Fisher
Design Workshop
A longer chat to run through design.
June 2025
Trusted by fast-growing companies around the world
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.
Make your event type
Sales Demo
Mon - Fri, 9:00 AM - 9:30 AM
30m
Choose the embed type
Adjust your embed and publish
Button color
#4050FF
Theme
Auto
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.
Inline embed
June 2025
Floating pop-up button
Pop-up via element click
Email embed
Alex <alex@deel.com>
Hi John,
Please find a suitable time here:
June 2025
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 flow to match their product.
1// Style Atoms with Javascript23const 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};14const 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!
15m30m45m1h
Cal Video
Europe/Amsterdam
May 2025
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.
Alex Fisher
Quick meeting
A quick chat
June 2025
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.
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.
<!-- Cal inline embed code begins --> <div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline-30min"></div> <script type="text/javascript"> (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal;
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
The embed system includes advanced features for technical users and teams that need full customization and integration capabilities.
Dynamic embed snippet generator
Multiple embed formats
Add or limit available time slots
Prefill booking form fields
Track UTM parameters in embeds
Mobile-optimized out of the box
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.
All your key tools in sync with your meetings
Connects to Slack, Salesforce, and 100+ more. Bookings show up where your team already works.
Frequently asked questions about Cal.com embed
The short ones are here. For anything else, ask below.
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.
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](https://cal.com/help/embedding/prefill-booking-form-embed).
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.
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](https://cal.com/docs/platform/atoms/booker).
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.
See why our users love Cal.com
Read the impact we've had from those who matter most - our customers.
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.