Timekit

How to integrate Timekit with Webflow

Adding appointment scheduling to your Webflow site removes manual booking coordination and gives clients self-service access to your calendar. Timekit handles availability checking, booking confirmations, and payment collection directly on your site.

You can connect Timekit's booking widget with Webflow through Code Embed elements for standard scheduling interfaces, or build with the Timekit API for custom booking logic and backend system integration.

Embed the Timekit widget

Timekit's booking widget embeds directly into Webflow through custom Code Embed elements.

To set this up, add a Code Embed element in Webflow, paste your project script from Timekit's dashboard, and publish. The widget displays calendar availability, creates bookings, and sends confirmations.

You can also use JavaScript configuration overrides to customize your booking widget. Modify display names, language settings, widget height, timezone behavior, and tracking code integration through the configuration object.

This method works for service businesses, consultants, healthcare providers, and agencies that need client self-scheduling.

Some things you can build with this integration include:

• Brand-matched interfaces: The widget uses your site's visual styling for consistent design across booking flows
• Automated confirmations: Email notifications send to clients and service providers when bookings complete
• Resource management: Assign team members, equipment, or rooms to specific booking types with availability rules

The widget won't display until you publish your site to a live domain. Set the embed element's container to max-width: 650px with auto left and right margins for optimal display.

Build with Webflow and Timekit APIs

The Timekit API gives you programmatic control over bookings, resources, and calendar synchronization. You build custom scheduling logic, integrate with backend systems, or create headless booking experiences while Webflow provides the presentation layer.

Note: API access requires Pro or Platform plans. All requests use HTTPS with Basic Authentication where your API key acts as the password with an empty username.

Create and manage bookings programmatically

Custom booking flows use API endpoints that create appointments, check availability, and manage cancellations. This approach works when your business logic goes beyond standard calendar selection, meaning you need multi-step intake forms, conditional resource assignment, or third-party system integration.

To set this up, send POST requests with customer details, resource IDs, and time slots. The API returns booking confirmations with unique identifiers for cancellation or modification.

Common implementation patterns include:

• Multi-page booking funnels: Collect customer information across Webflow Form pages, submit to your middleware, then create Timekit bookings through API calls
• Conditional resource routing: Assign appointments to specific team members based on service type, language preference, or availability constraints
• Backend system synchronization — Push booking data to CRMs, payment processors, or analytics platforms through webhook listeners

Your code runs in Webflow's custom code areas or external servers. Use Webflow form submissions to trigger API calls, or build JavaScript that calls Timekit endpoints directly from the browser.

Synchronize calendar availability

Calendar synchronization keeps your booking availability current across Google G-Suite or Microsoft Office 365 calendars. Resources must complete integration by signing in at the admin portal.

The API exposes availability queries that return open time slots based on calendar data. Your Webflow site displays these slots through custom JavaScript that fetches availability and renders booking options.

Some integration requirements include:

• Calendar connection: Resources authenticate with Google or Microsoft accounts through the Timekit admin interface
• Availability queries: API calls check open slots across connected calendars before displaying booking options
• Conflict prevention: Calendar events automatically block time slots to prevent double-booking

This pattern works for teams managing availability across multiple calendars. Query the API, display results in your Webflow interface, and Timekit writes to calendars when bookings complete.

What you can build

Integrating Timekit with Webflow adds appointment scheduling, resource coordination, and payment collection directly on your site.

• Service business websites — Build sites for consultants, therapists, or coaches with embedded booking that matches your brand. Clients select time slots, complete intake forms, and receive confirmations without leaving your domain.
• Healthcare appointment portals — Create patient booking experiences with provider selection, insurance verification, and automated reminder workflows. Automated reminders and confirmations reduce no-show rates.
• Agency client onboarding — Add scheduling to service pages where prospects book discovery calls, strategy sessions, or project kickoffs. Display team availability and route meetings based on service type.
• Fitness and training scheduling — Set up class bookings, personal training sessions, and equipment reservations with calendar synchronization and payment processing. Connect to existing business systems through API integration.