Calendly

How to integrate Calendly with Webflow

Calendly offers multiple integration paths with Webflow, from simple embeds to advanced API implementations.

Use code embeds for quick setup, pop-up widgets for site-wide scheduling, or build custom integrations using Calendly's API for maximum control over the booking experience and data synchronization.

Use code embeds and widgets

Calendly provides three embed methods that work seamlessly with Webflow.

The inline embed displays your scheduling interface directly within page content — perfect for dedicated booking pages. Access this via your Calendly Event Type settings under Share > Add to Website > Inline Embed. Copy the generated code and paste it into a Webflow embed element.

For a less intrusive option, the pop-up widget (Share > Add to Website > Popup widget) adds a floating button that launches your scheduler in a modal window. This method requires adding Calendly's script to your site's custom code (Site Settings > Custom Code > Footer Code), then configuring the button appearance. The widget persists across all pages, maintaining scheduling accessibility throughout the user journey.

The pop-up text method transforms any text link into a scheduling trigger. Add unique IDs to your links and initialize them with Calendly's JavaScript — ideal for contextual CTAs within content. For detailed implementation, see Calendly's embed options guide.

Key capabilities include:

• Hide event details to prevent redundant information
• Remove cookie banners for GDPR-compliant sites
• Customize colors on paid plans to match your brand
• Pre-fill invitee information via URL parameters

Build with Webflow and Calendly APIs

Calendly’s API v2 lets you retrieve scheduling data, availability, and sync events, but bookings themselves must be completed using Calendly's embeds, not programmatically.

Combined with Webflow's API, you can create dynamic scheduling experiences that adapt to user data and behavior. Note that Calendly's v1 API will be completely deprecated in August 2025, so new implementations should use v2 exclusively.

Key capabilities include:

• Dynamic availability displays showing real-time slots
• Automated booking workflows with CRM synchronization
• Team scheduling with round-robin distribution

Retrieve and display available time slots

Build custom availability interfaces that match your site design perfectly:

1. Fetch event types using Calendly’s GET /event_types to retrieve your scheduling options and their URIs
2. Query available times via GET /event_type_available_times with the event URI and date range (max 7 days)
3. Display slots in Webflow by parsing the JSON response and populating a Collection List or custom grid with Webflow CMS APIs where you could create CMS Items that track availability blocks

The event availability endpoint returns time slots in the invitee's timezone, eliminating conversion errors. Combine this with Webflow's CMS to create dynamic booking interfaces that update based on real-time availability.

Sync scheduled events to Webflow CMS

Automate appointment tracking and follow-ups by syncing Calendly data:

1. Configure webhooks via POST /webhook_subscriptions to receive real-time notifications for invitee.created and invitee.canceled events
2. Process webhook payloads in a serverless function (Netlify Functions or AWS Lambda) to extract booking details
3. Update Webflow CMS using Webflow's API to create or update Collection items with appointment data

The Calendly webhook documentation details payload structures including invitee information, event URIs, and UTM parameters for attribution tracking. This enables automated email sequences, dashboard creation, and conversion tracking.

Implement team scheduling workflows

Enable complex multi-person scheduling scenarios:

1. List team members using GET /organization_memberships to identify available hosts
2. Create round-robin events that distribute meetings across team members based on availability
3. Track assignments via webhooks to ensure equitable distribution and monitor team utilization

The organization endpoints provide role-based access control, enabling you to build scheduling interfaces that respect team hierarchies and permissions.

What you can build

Integrating Calendly with Webflow opens possibilities for automated scheduling, enhanced user experiences, and data-driven optimization.

• Sales demo booking systems: Embed qualification forms that route high-intent prospects to appropriate sales reps, with automatic CRM updates and follow-up sequences triggered by bookings
• Client consultation portals: Create branded scheduling pages where clients self-book discovery calls after reviewing your portfolio, reducing administrative overhead by 40%
• Recruitment platforms: Build interview scheduling workflows that coordinate multiple stakeholders, with automated candidate communications and ATS integration
• Educational course enrollment: Design class booking interfaces where students reserve seats, receive automatic Zoom links, and trigger payment workflows through connected systems