Connecting Acuity Scheduling with Webflow adds a full booking system directly to your pages. Visitors can view availability, select appointment types, fill out intake forms, and pay deposits, all within an embedded scheduler or popup. Automation tools like Zapier can sync appointment data to [Webflow CMS](https://help.webflow.com/hc/en-us/articles/33961307099027-Intro-to-the-Webflow-CMS) collections, keeping your site content up to date without manual entry.

This integration is useful for consultants, therapists, fitness studios, salons, photographers, and any service business running on Webflow. Agencies building client sites also benefit, since booking is one of the most common feature requests for service-industry projects.

## **How to integrate Acuity Scheduling with Webflow**

**What is Acuity Scheduling?** [Acuity Scheduling](https://acuityscheduling.com/) is appointment scheduling software that lets clients book, reschedule, or cancel appointments on their own. It supports custom appointment types, intake forms, automated reminders, payment collection through Stripe, Square, and PayPal, and calendar syncing with Google Calendar and other providers. Acquired by Squarespace in 2019, Acuity operates as a standalone product compatible with any website platform.

Service businesses use Acuity with Webflow when they need visitors to book directly from their site without redirecting to a separate scheduling page. The combination works well for single-practitioner practices embedding a scheduler on a dedicated booking page, multi-service businesses offering different appointment types on separate pages, and agencies delivering client sites that need booking functionality at launch.

The Acuity Scheduling-Webflow integration supports 3 approaches:

- Acuity embed codes let you add an inline scheduler, popup booking button, or persistent booking bar to any Webflow page without writing custom code.
- Zapier syncs appointment data between Acuity and Webflow CMS collections automatically when bookings are created, rescheduled, or canceled.
- The Webflow and Acuity Scheduling APIs give you full control over custom booking flows, real-time availability displays, and CMS data syncing, but require server-side development.

Most implementations start with an embed code for the booking interface, then add Zapier if appointment data needs to appear in CMS collections.

### **Add Acuity Scheduling to your site with embed codes**

Acuity provides three embed formats that work with Webflow without any API configuration or server-side setup. Each format is generated from the Embed tab inside your Acuity account and consists of standard HTML and JavaScript. The inline scheduler displays the full booking interface on a page. The booking button opens the scheduler in a popup modal. The booking bar adds a persistent booking strip across all pages of your site. A fourth option, a simple hyperlink button, works on any Webflow plan including free.

To get your embed code from Acuity:

1. Log into Acuity and go to **Scheduling Page** \> **Link**.
2. Under **Direct Links & Embedding**, use the drop-down to select your default scheduler or a specific calendar and appointment type.
3. Click the **Embed Scheduler**, **Booking button**, or **Booking bar** tab.
4. Click **Copy**.

Each embed format maps to a specific placement method in Webflow. The sections below cover all three options.

#### **Embed the inline scheduler on a page**

The inline scheduler displays the full booking calendar directly on your page. Visitors select an appointment type, pick a date and time, fill out intake forms, and complete payment without leaving your site. This is the best option for dedicated booking pages.

To add the inline scheduler:

1. Copy the embed code from Acuity's **Embed Scheduler** tab.
2. In Webflow, open the **Add Elements** panel and drag a [Code Embed](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed) element onto your page where you want the scheduler to appear.
3. Paste the Acuity iframe and script code into the Code Embed editor.
4. Click **Save & Close**.
5. Publish your site.

The embed code looks like this:

```
<iframe src="YOUR_SCHEDULER_URL" width="100%" height="800" frameBorder="0"></iframe>
<script src="https://embed.acuityscheduling.com/js/embed.js" type="text/javascript"></script>
```

Replace `YOUR_SCHEDULER_URL` with the URL from your Acuity Embed tab. The scheduler will not render in the Webflow canvas. You will see a gray placeholder box, which is standard behavior for Code Embed elements. Test on the published site or in Preview mode.

#### **Add a booking button with a popup modal**

The booking button opens the scheduler in a modal overlay when clicked. This works well for hero sections, call-to-action areas, and pricing tables where a full inline calendar would take up too much space.

To add the booking button:

1. Copy the code from Acuity's **Booking button** tab.
2. In Webflow, go to the page where you want the button to appear. Open **Page settings** \> **Custom code**.
3. Paste the code into the **Before**`</body>` **tag** field.
4. Click **Save Changes** and publish your site.

The booking button script must go in the body section, not the `<head>`, because it depends on JavaScript to render. Refer to the [custom code in head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags) documentation for details on where different code types belong.

#### **Add a site-wide booking bar**

The booking bar attaches a persistent strip to the edge of every page on your site. Visitors can access booking from any page without needing a dedicated scheduling page.

To add the booking bar:

1. Copy the code from Acuity's **Booking bar** tab.
2. In Webflow, go to **Site settings** \> **Custom code**.
3. Paste the code into the **Footer Code** field (renders before `</body>` on every page).
4. Click **Save Changes** and publish your site.

#### **Connect Acuity Scheduling and Webflow with Zapier**

Automation platforms bridge the gap between Acuity appointment events and Webflow CMS data. This is useful when you need appointment information to appear on your site, for example displaying upcoming classes, showing practitioner availability, or building a client-facing appointment directory. [Zapier](https://zapier.com/apps/acuity-scheduling/integrations/webflow) offers a direct Acuity-Webflow connection with Webflow CMS actions.

To set up a Zapier workflow that syncs new appointments to a Webflow CMS collection:

1. Create a Zap at [zapier.com](https://zapier.com/) and select Acuity Scheduling as the trigger app.
2. Choose **New Appointment** as the Acuity trigger event and authorize your Acuity account.
3. Select Webflow as the action app and choose **Create Live Item**.
4. Authorize your Webflow account, then select the target site and CMS collection.
5. Map Acuity fields (client name, appointment type, date, time) to Webflow CMS collection fields.
6. Test the action and click **Publish Zap** to activate.

### **Build with the Webflow and Acuity Scheduling APIs**

The API path gives you full control over the booking experience. You can build a custom scheduling UI styled entirely with Webflow's design tools, display real-time availability without an iframe, create appointments programmatically from Webflow form submissions, and sync appointment data to CMS collections through webhooks. This approach requires server-side development because Acuity does not support cross-origin requests from the browser. All API calls must go through a serverless proxy (Netlify Functions, Vercel, AWS Lambda, or similar).

### **Display real-time availability on a Webflow page**

You can build a custom availability display using Acuity's availability endpoints and a serverless proxy. This approach avoids the iframe entirely, giving you full styling control.

#### **Create appointments from Webflow form submissions**

You can use Webflow form submissions as the entry point for creating Acuity appointments. A [Webflow form webhook](https://developers.webflow.com/data/docs/working-with-webhooks) sends submission data to your serverless function, which then calls `POST /api/v1/appointments` on Acuity.

## **What can you build with the Acuity Scheduling Webflow integration?**

Integrating Acuity Scheduling with Webflow lets you add appointment booking, class registration, and intake collection to your site without building a scheduling system from scratch.

### Frequently asked questions
- How do I embed Acuity Scheduling on a Webflow page?
- Can I style the Acuity scheduler to match my Webflow site?
- Can I sync Acuity appointment data to Webflow CMS collections?
- Does Acuity Scheduling have a Webflow Marketplace app?
- Do I need a paid Webflow plan to use Acuity on my site?

Acuity Scheduling  
Joined in

## Category
[Calendars and scheduling](/content/integrations-type/calendars-and-scheduling/index.html)

## Description
Embed Acuity Scheduling's booking calendar, popup buttons, or persistent booking bars into Webflow pages using embed codes, or sync appointment data to the CMS with Zapier.