Timekit

A Webflow site gives you full control over design and content, but it has no built-in scheduling engine. Webflow pages cannot show live availability or complete appointment booking, and they do not write bookings to a calendar. Visitors who want to book a time have to contact you manually or leave your site for an external scheduling page.

Timekit closes that gap with an embeddable booking widget and a scheduling API. Drop the widget into a page and visitors search live availability and book on the spot. Timekit saves the event to the right calendar, then sends email notifications and webhook events. From there, Zapier or the two platforms' APIs push each booking into your site's content.

The integration fits agencies building appointment-heavy sites such as retail showrooms, healthcare providers, and fitness studios. It also suits in-house SaaS marketers who want to convert site traffic into booked demos without a redirect, and developers who need an API-first scheduling backend for marketplace-style builds, such as routing bookings across many coaches or interviewers.

How to integrate Timekit with Webflow

What is Timekit? Timekit is an API-first scheduling platform. Through a REST API and an admin dashboard at admin.timekit.io, it manages resources and booking workflows, including availability searches. It also ships Booking.js, an embeddable booking widget that runs on the Timekit API.

Teams pair the two when a marketing site needs to take appointments itself rather than link out. The same patterns apply to a Webflow site, whether that means a consultant's discovery calls, in-store showroom appointments, recruitment scheduling, or seat-based class bookings. Timekit does not have an official Webflow Marketplace app, so you assemble the integration manually with the methods below.

Choose the Timekit-Webflow implementation path based on how much control the site needs. The Timekit booking widget drops into a page through a Code Embed element, with no code beyond a pasted snippet. Zapier connects Timekit booking events to Webflow CMS actions without custom code. The Webflow and Timekit APIs give you full control over availability searches, bookings, and CMS sync, but require server-side development. Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed the Timekit booking widget with Code Embed

Booking.js v3 is Timekit's embeddable booking widget. It runs on the Timekit API and requires a Timekit account to fetch availability and create bookings. This is the fastest path to live booking on a Webflow page. Adding custom code requires a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan. You can take two paths here: paste the admin share snippet with no code, or initialize the widget with a small script.

Paste the admin share snippet

Timekit's help center documents this path in its guide to embedding Timekit in Webflow, and Timekit has built and hosted its own site on Webflow for years.

To embed the widget:

1. Set up a project in the Timekit admin at admin.timekit.io. Use Timekit's first project guide.
2. Copy the share snippet from the project's Share tab.
3. Add a Code Embed element to your page and paste the snippet.
4. Publish your site.

The widget renders only on the published, live domain, not in preview. Code Embed elements hold up to 50,000 characters and accept HTML, CSS in <style> tags, and JavaScript in <script> tags.

Initialize Booking.js v3 with custom configuration

Manual initialization suits builders who want to override the admin setup per page. The app_key here is the App Widget Key, which is safe to expose in public client-side code. Custom configuration merges with the settings saved in the admin panel, so you only override what you need.

To initialize the widget:

1. Copy your App Widget Key and project ID from the Timekit Admin Dashboard under API settings.
2. Add the script to a Code Embed element or to your page's body code, following Custom code in head and body tags.
3. Initialize the widget:

var widget = new TimekitBooking();
widget.init({
  app_key: 'test_widget_key_',
  project_id: 'e02fc0af-4bd0-4644-a677-3ba4e818ff34'
});

Override the admin setup only where a page needs to differ. You can pre-fill customer fields from URL parameters such as ?customer.name=Marty, or through the customer_fields key with prefilled and readonly options. The ui object styles the widget, including display_name, avatar, availability_view, time_date_format, and localized text like the submit button label, while a fullcalendar configuration overrides the calendar grid.

One version caveat applies. Timekit's older help articles reference Booking.js v2, which depends on jQuery, so cross-check any help center snippet against the Booking.js v3 developer docs before pasting it.

Connect Timekit and Webflow with Zapier

Zapier provides ready-made connectors for both Timekit and Webflow, with dedicated pair pages in both directions. Timekit lists Zapier on its features page, and its Zapier recipes show how to catch Timekit webhooks in Zapier. Setup means copying a Zapier Catch Hook URL into the Timekit Admin as a webhook destination. For non-developers, this is the only automation path that syncs bookings into the CMS without custom code.

Useful trigger-to-action pairs include:

• Timekit New Booking Received → Webflow Create Live Item, which publishes a confirmed appointment to a CMS Collection immediately
• Timekit New Cancellation Received From a Customer → Webflow Update CMS Item, which updates the matching CMS item's status
• Timekit New Completed Booking, which fires about an hour after the session ends → Webflow Update Live Item, which marks the CMS record completed or archived
• Timekit New Rescheduled Booking, Timekit New Booking With a Payment Step, and Timekit New Tentative Booking (a new booking on a manual confirmation flow) map to Webflow Create Live Item or Webflow Update Live Item. These triggers cover the remaining lifecycle states.

Date fields sent to the CMS must be in ISO 8601 format, for example YYYY-MM-DDTHH:MM:SS.sssZ.

Build with the Webflow and Timekit APIs

The API path gives developers full control over availability display and booking creation, plus the CMS sync that follows. It requires a backend. Webflow code sections don't run server-side languages like PHP, Python, or Ruby, and the Timekit App API Key must never appear in client-side code, so handlers run on a serverless function, an external server, or Webflow Cloud. Timekit authenticates with Basic Auth over HTTPS, with the API key as the password and an empty username. For client-side availability queries, Timekit's Signed Search scopes requests with a JWT signed server-side using the App API Key; note that the token never expires and no revocation mechanism is documented.

The API build uses Timekit for scheduling operations and Webflow for CMS and event handling. The Timekit API v2 at https://api.timekit.io/v2 handles resources, availability searches, and bookings. Webflow's Data API handles CMS collections and form submissions, and Webflow webhooks trigger real-time events between the two systems.

Timekit v2 is the only publicly documented and supported API version, so make all calls to the explicitly versioned https://api.timekit.io/v2 base.

Create bookings from a Webflow form

In this pattern, a visitor submits a Webflow form and your backend books the slot in Timekit. Timekit's docs describe integrations as a flow that starts with resources and availability searches, then moves into booking creation and updates.

To implement this:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks using triggerType: "form_submission". Creating the webhook requires the sites:write scope, per the Create Webhook reference, while reading the submitted form data uses the forms:read scope, per Webflow's webhooks tutorial.
2. In your handler, verify the delivery using the x-webflow-timestamp and x-webflow-signature headers.
3. Query POST https://api.timekit.io/v2/availability with project_id, mode (mutual, roundrobin_random, roundrobin_prioritized, or exclusive), resources, and constraints such as opening hours, per the availability reference.
4. Create the booking with POST https://api.timekit.io/v2/bookings. Pass resource_id, graph, start, end, what, where, and a customer object with name and email, per the bookings reference.

Timekit returns the booking id and state. Pass an optional reservation_id to create the booking from a previously reserved slot.

Sync booking states to the Webflow CMS

Timekit webhooks notify your handler as bookings move through states, and the handler writes each change to the CMS. This keeps a Collection in step with the booking engine without polling.

To implement this:

1. Add your receiver URL as a webhook at https://admin.timekit.io/a/webhooks, then verify payloads with the HMAC-signed x-timekit-signature header, per the signed webhooks docs.
2. Return a 2xx status to acknowledge receipt. Timekit's webhook docs do not document automatic retries; they note the ability to replay failed webhooks from the Admin.
3. Map states to CMS calls using a token with the CMS:write scope. On created, run POST /v2/collections/{collection_id}/items. On confirmed, run PATCH /v2/collections/{collection_id}/items/{item_id}/live. On cancelled, run DELETE /v2/collections/{collection_id}/items/{item_id}/live.

The webhook payload mirrors the /bookings/:id response, including id, state, graph, and nested event and customers objects. Timekit's webhook documentation describes the created, confirmed, and cancelled states in prose rather than as formal event-name constants, so test real payloads before writing filtering logic.

What you can build with the Timekit Webflow integration

Integrating Timekit with Webflow lets you take real-time bookings on your own pages without sending visitors to an external scheduling site.

• On-page demo scheduling: A SaaS landing page with the booking widget embedded below the pitch, so prospects book a sales call without leaving the page. Timekit's round-robin mode distributes demos across the sales team automatically.
• Group class booking: A fitness studio's class page where multiple customers book seats in the same slot. Timekit's group booking supports seat-based scheduling, which its docs describe as well suited to classes and webinars.
• Multi-provider appointment pages: A healthcare or agency site where each practitioner is a Timekit resource with individual availability, and prioritized routing controls who gets booked first.
• A published booking log: A Zapier flow that creates a live CMS item for each confirmed booking, displayed in a Collection List on an internal dashboard page.

If you need more control over availability queries, booking states, or CMS sync timing, the API path covers those cases. For a comparable on-page scheduling embed, see how to add a Calendly pop-up modal in Webflow.