Webflow sync, pageviews & more.
NEW

Is it possible to integrate a booking app on a website that connects with a Google Calendar to show available time slots and allows the client to approve appointments before adding them to the calendar? What are the preferred web apps or tools to achieve this with Webflow?

TL;DR
  • Choose a booking tool like Calendly, Acuity, or TidyCal that supports Google Calendar sync, manual approval, and Webflow embedding.
  • Embed the booking tool into Webflow using the Embed element and set up Google Calendar integration with two-way sync.
  • Enable manual appointment approval in the booking tool’s settings to review bookings before confirmation.

Yes, you can integrate a booking app with Webflow that syncs with Google Calendar, shows available time slots, and includes client approval before confirming appointments.

1. Choose a Booking Tool That Supports Google Calendar Sync and Approval

Preferred booking tools that meet these requirements:

  • Calendly (Pro plan and up)

  • Syncs directly with Google Calendar.

  • Offers an “event approval” feature via manual confirmation.

  • Can embed on a Webflow site using an Embed element.

  • Acuity Scheduling (by Squarespace)

  • Fully integrates with Google Calendar.

  • Allows manual appointment approval before it's added to your calendar.

  • Supports customizable forms and can be embedded in Webflow.

  • TidyCal (by AppSumo)

  • Budget-friendly alternative.

  • Syncs with Google Calendar.

  • Allows appointment confirmation step before finalizing bookings.

  • Has iframe/embed support for Webflow compatibility.

2. Embed the Booking Tool into Webflow

  • Get the embed code from Calendly, Acuity, or TidyCal.
  • In Webflow, use the Embed element (+ > Embed) to paste the script or iframe.
  • Publish your site to test the embedded scheduler.

3. Configure Google Calendar Integration

  • In your booking tool’s settings, connect your Google Calendar account.
  • Enable a two-way sync where available, so:
  • Booked time slots block your calendar.
  • Busy times on your calendar are not available for booking.

4. Enable Manual Appointment Approval

  • Calendly: Enable "Host approval required" setting in the event type's advanced settings (Pro plan required).
  • Acuity: Go to Appointment Types > Advanced Settings > Need to Accept Appointments.
  • TidyCal: Enable approval required for bookings in the event settings.

When someone books:

  • They submit a request.
  • You decide to approve or decline the meeting.
  • Only upon approval is the meeting added to your or their calendar.

5. Optional: Automate Flows with Zapier or Make (if needed)

If you need more complex logic (e.g., sending custom confirmation emails, updating CMS items), connect Webflow and the booking tool through:

  • Zapier: Automate approval flows, email sequences, or database updates.
  • Make (formerly Integromat): For more flexible automations.

Summary

Use a tool like Calendly, Acuity Scheduling, or TidyCal to embed a Google Calendar-connected booking system into Webflow. Each supports manual approval and real-time availability syncing, and all can be easily added to your site via the Embed element.

Rate this answer

Other Webflow Questions