Cal.com integration
Cal.com is open-source scheduling with booking pages, routing forms and embeddable calendars. It is the booking tool we use on designme.agency. Framer has a built-in Cal.com component, on Webflow we paste the embed in a Code Embed, and on Astro or Next.js we load the embed only on click or when it scrolls into view, so it never slows the first load.
| Complexity | Low |
|---|---|
| Method |
|
| Typical setup | 2 to 6 hours |
| What we do | We add inline or popup booking that loads on demand, set up routing for sales calls and send bookings to your CRM or Slack. |
| Category | Scheduling |
Setup by platform
How we set up Cal.com
Framer
- Native
Framer’s built-in Cal.com component, under Forms in the Insert panel, has several layouts and theming. Cal.com also publishes its own Framer plugin.
Webflow
- Embed
The output of Cal.com’s embed snippet generator goes in a Code Embed: inline, floating button or popup on click. We theme it to match the site.
Astro
- Embed
Cal.com’s loader snippet runs only on click (popup) or when the calendar scrolls into view (inline), with preload for instant popups. This is how designme.agency is built.
Next.js
- Embed
- API
@calcom/embed-react with getCalApi for theme and events, loaded lazily. A signed webhook receives BOOKING_CREATED and sends it to the CRM.
Use cases
What teams use it for
Book a call button
A popup calendar from any CTA, prefilled with what the visitor already typed.
Inline booking on contact pages
The calendar on the page itself, so booking takes one step.
Qualify, then route
A routing form sends leads to the right rep or page, or to the Salesforce account owner.
Before you add it
What to watch out for
Performance
Load the embed on demand
The embed script and iframe are heavy for a first load. We load it on click or in view, and preload only where a popup is the main CTA.
Data layer
Cal.eu closes on 1 November 2026
Cal.com is moving Cal.eu users to Cal.com and documents no separate EU-hosted option after that date. Check this if EU hosting is a requirement.
Security
Verify webhook signatures
Booking webhooks are signed with HMAC-SHA256 in the X-Cal-Signature-256 header. We verify it before writing anything to your CRM.
FAQ
Questions about Cal.com
Is there an official Cal.com integration for Framer?
Yes. Framer has a built-in Cal.com component in the Insert panel, and Cal.com publishes a Framer plugin.
Is there a Cal.com app for Webflow?
We found no official app. Webflow’s integration page describes the embed snippet in a Code Embed, which supports inline, floating button and popup.
Can bookings go straight to our CRM?
Yes. Cal.com webhooks fire on new, cancelled and rescheduled bookings. We send them to HubSpot, Salesforce or Slack, directly or through Zapier.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call