SimplyBook

How to integrate SimplyBook with Webflow

Webflow's static hosting model requires external services for appointment booking functionality. SimplyBook addresses this through widget embedding, automation platforms like Zapier and Integrately, and API integration.

Most implementations start with no-code widget embedding via iFrames or button widgets to validate booking workflows. Widget embedding supports design customization through CSS. From there, you can add automation for CMS synchronization and custom notifications, or use API integration for complete control over booking workflows and data.

Embed booking widgets directly

SimplyBook provides four widget types that embed into Webflow using the custom code embed element without coding. The iFrame widget displays your complete booking interface directly on your page, allowing visitors to browse services, select times, and complete bookings. Configure all design elements, predefined services, and custom form fields in your SimplyBook booking widgets settings before copying the embed code.

Widget options include:

• iFrame widget: Full booking interface embedded directly on your page  
• Booking button widget: Opens booking in a modal window  
• Booking and contact button widget: Combines booking with contact functionality  
• Reviews widget: Displays client testimonials

Customize appearance through Settings > Booking widgets settings to configure colors, button styles, and slot indicators. Pre-fill services, providers, or client information for service-specific booking pages. Enable Custom CSS in Custom Features settings for advanced styling.

For dynamic service pages, create a Webflow CMS collection storing SimplyBook service IDs, add a custom code embed to your collection template, and configure the widget to pull service IDs from CMS fields.

You can add custom intake forms through Settings > Custom Features > Client Fields.

Mobile implementation

As fitness bookings often tend to occur on mobile devices, optimizing the embedded widgets for mobile is critical. Here’s how:

• Test on actual devices to verify touch interactions and form field behavior  
• Ensure 44px minimum touch targets for accessibility  
• Verify mobile keyboards display correctly for phone, email, and date fields  
• Set appropriate max-width and padding values to prevent overflow  
• Implement loading indicators for slower mobile connections

Connect through automation platforms

Zapier and Integrately provide verified native support for no-code connections between SimplyBook and Webflow for automated data synchronization.

Zapier offers 6 SimplyBook triggers, including New Booking, Booking Change, Booking Cancellation, New Client, New Offer,  and New Invoice) paired with 4 Webflow actions (Create CMS Item, Update CMS Item, Create Order, and Update Order).

Integrately provides pre-built workflow templates for faster deployment. Check availability on your plan, as Integrately integration features may vary. These platforms monitor booking events in SimplyBook and automatically create or update the Webflow CMS items.

The common workflows include:

• Booking to CMS synchronization: New bookings create CMS items with client details and appointment data  
• Status update synchronization: Cancellations or changes update CMS items automatically  
• Client database management: New clients populate your Webflow client collection  
• Service catalog automation: New services generate Webflow service pages

Set up by connecting your SimplyBook account (requires API access enabled) and Webflow account to your automation platform. Map data fields ensuring types match: dates to date fields, emails to email fields, service IDs to number fields. Both platforms support conditional logic for advanced scenarios.

Build with Webflow and SimplyBook API

The SimplyBook JSON-RPC 2.0 API at https://user-api.simplybook.me provides direct access to booking creation, availability checking, client management, and service listings. API integration gives you complete control over booking workflows, from displaying available time slots in custom calendar UIs to processing bookings through Webflow form submissions.

Security consideration: Because Webflow generates static sites, API credentials in client-side JavaScript are visible in browser source code. For production implementations, use serverless functions (AWS Lambda, Cloudflare Workers) as middleware. The tokens expire after one hour.

Display real-time availability

Build custom availability displays using the following API methods:

• getStartTimeMatrix: Returns available time slots for a service/provider within a date range  
• getWorkCalendar: Retrieves working days and hours for a specific month  
• getFirstWorkingDay: Identifies the next available booking date  
• calculateEndTime: Determines booking end time based on service duration

{
  "jsonrpc": "2.0",
  "method": "getStartTimeMatrix",
  "params": {
    "from": "2026-01-15",
    "to": "2026-01-22",
    "service_id": 1,
    "provider_id": 1,
    "quantity": 1
  }
}

Create bookings from Webflow forms

Process booking requests by connecting Webflow form submissions to the book method with serviceid, providerid, startdatetime (YYYY-MM-DD HH:MM:SS format), quantity, and a client object containing name, phone, and email. The API returns a booking object with the following fields: id, startDate, startTime, endDate, and endTime.

Handle validation errors by displaying messages to users. Implement reCAPTCHA to prevent spam. For sensitive data, sync to Webflow CMS through the Webflow API.

Manage existing bookings

The updateBooking, cancelBooking, and confirmBooking methods enable booking management interfaces. Build "My Bookings" pages where clients can retrieve appointments by booking ID, then cancel or reschedule them.

{
  "jsonrpc": "2.0",
  "method": "cancelBooking",
  "params": {
    "booking_id": 12345,
    "secure_signature": "optional_signature_string"
  },
  "id": 1
}

The required headers includes:

• X-Company-Login: The SimplyBook company login identifier  
• X-Token: Valid access token from the getToken method (valid for 1 hour)

Sync service and provider data

The getEventList() and getUnitList() methods retrieve all services and providers from the SimplyBook account. Fetch this data to populate dropdowns or create dynamic service cards.

Build service catalog pages by fetching services through the API, then creating Webflow CMS items through the Webflow API. Periodically synchronize the schedule to keep data current.

Implement real-time booking updates

SimplyBook provides real-time notifications through webhook capabilities. Since Webflow cannot receive webhooks directly, use Zapier or serverless functions (AWS Lambda, Cloudflare Workers) to receive payloads and update the Webflow CMS via the Webflow API.

Verify webhook signatures using HMAC SHA-256 before processing. Extract the signature from the X-Simplybook-Signature header, compare with the computed digest, and respond with HTTP 200 to acknowledge receipt.

What you can build

Integrating SimplyBook with Webflow enables tailored booking experiences for specific industries and workflows.

• Healthcare patient portal: Appointment scheduling with intake forms for medical history and insurance. Provider-specific pages with specialties, availability, and automated reminders. Website owners remain responsible for their own compliance obligations.  
• Multi-location fitness studio: Class scheduling with capacity limits, waitlist management, and package sales. Real-time availability across locations with instructor profiles.    
• Professional services booking hub: Consultation scheduling with intake questionnaires, payment deposits, time zone handling, and calendar synchronization.  
• Beauty and wellness marketplace: Service provider directory with personalized booking calendars, service menus, client reviews, and integrated package purchasing.