Acuity Scheduling

How to integrate Acuity Scheduling with Webflow

Service businesses need streamlined appointment booking that maintains brand consistency and reduces scheduling friction. The Acuity Scheduling integration with Webflow lets clients book appointments directly on your site while you maintain control over the customer experience and collect booking data in your CMS.

Connect Acuity Scheduling to Webflow through direct embed codes or API integration. Embed codes work for straightforward appointment booking interfaces, while API integration enables custom workflows like syncing appointment data to [Webflow CMS collections](https://help.webflow.com/hc/en-us/articles/33961294051347-Collection-list) or displaying real-time availability on service pages.

Embed schedulers and booking widgets

Acuity Scheduling provides three embed formats that work with Webflow's custom Code Embed elements. These embeds display your scheduling interface directly on Webflow pages.

The three embed formats are:

1. Embedded scheduler displays a full booking interface inline within page content, showing available times and appointment types. It works best for dedicated booking pages where appointment scheduling is the primary action.
2. Booking button opens the scheduler in a modal popup when clicked, useful for hero sections or calls-to-action. It integrates into service description pages or pricing tables where visitors need scheduling options after reviewing information.
3. Booking bar stays fixed to page edges, providing persistent booking access without interrupting page content. It works across multiple pages without dedicating full sections to scheduling interfaces.

Generate embed codes through your Acuity dashboard settings, then add them to Webflow using Code Embed elements.

Form questions have a 250-character limit per question with unlimited questions supported. The integration uses iframe embedding for CSS isolation, which prevents custom styling beyond Acuity's theme options. The iframe structure means no direct JavaScript interaction exists between Webflow elements and Acuity components.

Build with Webflow and Acuity Scheduling APIs

The Acuity Scheduling API enables custom booking workflows, real-time availability display in Webflow CMS collections, and appointment data flows between platforms.

Use the API when you need appointment data flowing into Webflow CMS for display alongside other content, availability-based page personalization, or booking processes that integrate with existing Webflow forms.

The Acuity Scheduling API reference documents authentication, endpoints, and response formats.

API integration enables these capabilities:

• Appointment management through create, retrieve, update, and cancel operations using the Appointments API
• Real-time availability checking by querying available time slots for specific appointment types and calendars via the Availability API
• Webhook notifications that send real-time updates when bookings change through webhook events
• CMS synchronization by connecting appointment data to Webflow collections using the Webflow Data API

Authentication uses HTTP Basic Auth with your Acuity User ID as the username and API Key as the password. Generate API credentials through your Acuity dashboard. Webflow's Data API requires Bearer token authentication with tokens generated through the Webflow dashboard or OAuth flow.

Sync appointments to Webflow CMS

Create CMS collections in Webflow that mirror appointment data structure, then use Acuity webhooks to trigger collection item creation or updates when bookings occur. This pattern works for businesses displaying upcoming appointments on their site, showing team availability calendars, or building client portals where customers view their booking history.

You'll need server-side code to receive webhook events from Acuity and make API calls to Webflow. Your implementation handles these steps:

• Configure webhooks in your Acuity dashboard pointing to your server endpoint
• Handle webhook events for scheduled, rescheduled, canceled, and changed actions
• Create CMS items via Webflow's POST /v2/collections/{collection_id}/items endpoint when appointments are scheduled
• Update items via PATCH /v2/collections/{collection_id}/items/{item_id} when appointments change or cancel

Acuity webhook payloads include appointment IDs, calendar IDs, and appointment type IDs. Your server-side code fetches full appointment details using GET /api/v1/appointments/{id} from the Acuity Appointments API, then maps fields to your Webflow collection structure.

Handle webhook retries and implement idempotency checks since Acuity may send duplicate events during network issues.

Display real-time availability

Query Acuity's availability endpoint to show open time slots directly in Webflow pages without requiring visitors to open the full scheduling interface. This pattern works for businesses where showing immediate availability drives conversion, such as urgent care clinics, same-day service providers, or consultants promoting next-available appointment times.

Your implementation follows this approach:

• Fetch availability using GET /api/v1/availability with parameters for appointment type, calendar, and date range per the availability documentation
• Display slots in Webflow using custom JavaScript that populates page elements with available times
• Link to booking by constructing Acuity scheduling URLs with pre-selected times or opening the embedded scheduler with specific slots highlighted

The availability endpoint accepts parameters for appointment type, calendar, and date range. Response JSON includes arrays of available time slots with start times, end times, and calendar information. Cache responses appropriately since availability changes as bookings occur.

Your JavaScript fetches availability on page load, filters slots based on user preferences or page context, then updates DOM elements with formatted time options. Each slot links to your embedded scheduler with the selected time pre-populated.

Create appointments from Webflow forms

Accept booking requests through Webflow forms, then create Acuity appointments via API without requiring visitors to interact with Acuity's interface. This approach works when you need custom form designs, multi-step booking flows, or integration with Webflow's native form submission handling and notifications.

Your implementation follows this approach:

• Collect booking details using Webflow forms with fields for appointment type, date preference, time preference, and client information
• Process form submissions via webhook to your server endpoint configured in Webflow site settings
• Create appointments using POST /api/v1/appointments from the Acuity Appointments API
• Confirm bookings by redirecting to success pages or sending confirmation emails through your system

The appointments endpoint requires appointmentTypeID, datetime, firstName, lastName, email, and phone at minimum. Additional fields map to Acuity intake form questions if configured. The API returns the created appointment object including the confirmation ID and scheduling link for client reference.

Validate availability before creating appointments by checking GET /api/v1/availability to prevent double-booking. Handle API errors gracefully since appointment creation may fail due to calendar conflicts, invalid appointment types, or missing required fields.

What you can build

Integrating Acuity Scheduling with Webflow enables service businesses to automate appointment booking while maintaining complete brand control over the customer experience.

• Client booking pages: Build dedicated scheduling pages within your Webflow site design that display your branding, service descriptions, and embedded Acuity schedulers where visitors select appointment types and available times
• Team availability displays: Query Acuity's API and populate Webflow CMS collection lists with team member profiles, specialties, and next available appointment slots that update as bookings occur
• Service landing pages with instant booking: Create service-specific landing pages that describe offerings, display pricing, and include booking buttons that open Acuity's scheduler pre-configured for that specific service type
• Client portals: Build member areas using Webflow's gated content where authenticated clients view their upcoming appointments synced from Acuity via webhooks to Webflow CMS, displaying booking history and confirmation details alongside other account information