Cal.com

How to integrate Cal.com with Webflow

Scheduling appointments directly on your site removes friction from the booking process. Cal.com integration turns static Webflow pages into booking-enabled platforms where visitors schedule consultations, demos, or client services without leaving your site.

Cal.com works with Webflow through direct embedding using Code Embed elements, API integration for custom implementations, and Zapier automation for workflow triggers. Embedding requires no coding and uses Cal.com's Embed Snippet Generator to create inline calendars, floating buttons, or pop-up schedulers.

Direct embeds and widgets

Cal.com generates HTML snippets that work in Webflow's Code Embed element. You configure the booking widget in Cal.com's dashboard, copy the code, and paste it into your Webflow page. The scheduler appears after you publish. Webflow's Designer will not show embed previews.

The Cal.com embed snippet generator creates four embed types:

• Inline embed: Full calendar interface embedded directly in page layout for dedicated booking pages
• Floating pop-up button: Persistent button that opens scheduler in a modal, available across all pages
• Pop-up via element click: Attach the scheduler to existing buttons, images, or text elements
• Email embed: Generate personalized booking links for email campaigns

Configure appearance options including theme (light, dark, auto), brand colors, layout preferences, and custom CSS variables. For step-by-step setup guidance, refer to the adding embed guide.

To add an embed:

1. Create an event type in Cal.com with availability rules and booking settings
2. Generate embed code through the Embed Snippet Generator
3. Open your Webflow project and drag a Code Embed element onto the page
4. Paste the Cal.com HTML snippet into the Code Embed element
5. Publish the site to activate the widget

For floating buttons available site-wide, add the code in site settings under Custom Code in the "Before </body> tag" section instead of using individual page embeds.

Limitations: Embeds require JavaScript and iframe support (iframes are embedded windows that load Cal.com's interface within your page) in visitors' browsers. Code modifications may break functionality. Insert Cal.com snippets as-is.

The widget loads asynchronously (loads in the background without blocking page rendering) to minimize page speed impact. Webflow's Code Embed element and site-level custom code settings accommodate Cal.com embed code without character limit concerns.

Build with Webflow and Cal.com API

The Cal.com API enables custom booking flows, data synchronization, and scheduling logic that integrates with your application layer. The API supports three authentication methods (API key, OAuth client credentials, and managed user access tokens) for implementing custom availability displays, programmatic booking creation, or real-time schedule updates.

This requires backend infrastructure and developer resources to build custom implementations beyond what Webflow provides natively.

API integration makes sense when you need booking data flowing between systems, custom user interfaces that match complex design requirements, or scheduling features embedded in authenticated user dashboards. Standard embeds handle most use cases. The API serves technical teams implementing custom experiences.

For most Webflow users, the embed-based integration through Cal.com's Embed Snippet Generator provides scheduling features without requiring API implementation.

Use Zapier to automate workflows

Zapier's Cal.com + Webflow integration automates actions based on booking events. When a booking is created, cancelled, rescheduled, or a meeting ends, Zapier triggers workflows that can update Webflow CMS collections without manual data entry.

Available triggers include:

• Booking Created: Fires when someone schedules an appointment
• Booking Cancelled: Fires when a booking is removed
• Booking Rescheduled: Fires when appointment time changes
• Meeting Ended: Fires after scheduled meetings conclude

Common automation patterns connect booking events to CMS updates. You can add clients to "Current Clients" collections, publish content after onboarding calls, or maintain synchronized records across platforms. Zapier workflows enable automated client portals that update when booking status changes, or trigger nurture sequences when prospects book demos.

Note: Zapier automations have typical delays of several minutes between trigger and action. This provides automated workflows rather than instantaneous real-time updates.

What you can build

Integrating Cal.com with Webflow turns static sites into booking-enabled platforms for consultations, demos, and client services.

• Consultant portfolio sites: Embed inline schedulers on service pages where prospects book discovery calls while browsing your work samples and case studies
• Agency client portals: Use Zapier to create Webflow CMS items when clients book, implementing automated dashboards that display upcoming sessions and project milestones
• Course landing pages: Add floating booking buttons for enrollment consultations, allowing visitors to schedule information sessions from any page without disrupting their browsing
• Healthcare practice sites: Embed booking forms where patients self-schedule appointments with automated reminder systems (Cal.com supports HIPAA compliance through Business Associate Agreements, though the entire Webflow implementation must meet healthcare data standards)