SimplyBook

How to integrate SimplyBook with Webflow

Appointment booking systems turn website visitors into confirmed clients by automating scheduling, payment collection, and calendar management. SimplyBook handles these workflows while Webflow manages your site design and content, letting you focus on client acquisition rather than manual booking coordination.

Integrate SimplyBook with Webflow through three methods. Embed booking widgets directly into your pages for immediate scheduling functionality. Connect through automation platforms like Zapier or Integrately to synchronize booking data with your Webflow CMS. Build custom booking interfaces using the SimplyBook API for complete control over design and workflows.

Embed booking widgets directly

SimplyBook provides four widget types that embed into Webflow using custom Code Embed elements. 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.me booking widgets settings before copying the embed code.

SimplyBook offers these widget types for different use cases:

• iFrame widget - Full booking interface with service browsing, time selection, client login, and package purchases embedded directly on your page
• Booking button widget - Opens booking interface in a modal window when clicked, useful for sites where a full iframe would disrupt page layout
• Booking and contact button widget - Single button combining appointment booking with contact functionality
• Reviews widget - Displays client testimonials from your SimplyBook.me account

Customize widget appearance through SimplyBook.me's booking widgets settings before generating embed code. Access Settings → Booking widgets settings in your SimplyBook.me admin panel to configure brand colors, background colors, button styles, and available/unavailable slot indicators. Pre-fill specific services, providers, locations, or client information to create service-specific booking pages. For advanced customization options like custom CSS, enable the Custom CSS feature in your Custom Features settings. Complete all customization before copying the widget code to embed into Webflow.

For dynamic service pages, create a Webflow CMS collection with a plain text field storing SimplyBook.me service IDs. Add a Code Embed element to your collection template and paste the SimplyBook.me widget code. When generating the widget code from SimplyBook.me's settings, configure it with a predefined service parameter, then update the code to pull the service ID from your CMS field. Each collection page displays booking functionality specific to that service. For detailed instructions, see Webflow CMS Custom Code Embeds.

Add custom intake forms through Settings → Custom Features → Client Fields. Text inputs, dropdowns, checkboxes, date pickers, and file uploads automatically appear in embedded widgets after saving.

Test widget functionality on actual mobile devices rather than relying solely on Webflow's responsive preview. Verify these mobile-specific requirements:

• Touch target sizing - Booking buttons and time slot selections meet minimum 44px touch target requirements for accessibility
• Form field optimization - Mobile keyboards display correctly for phone, email, and date fields
• Mobile checkout flow - Payment processing works properly on mobile devices
• Container constraints - Set appropriate max-width and padding values on embed containers to prevent mobile overflow
• Loading states - Implement visual indicators while widgets load on slower mobile connections

Connect through automation platforms (Zapier, Integrately)

Zapier and Integrately provide no-code connections between SimplyBook.me and Webflow for automated data synchronization. Zapier offers 6 SimplyBook.me triggers (New Booking, Booking Change, Booking Cancellation, New Client, New Offer, New Invoice) paired with 4 Webflow actions (Create CMS Item, Update CMS Item, Create Order, Update Order). Integrately provides pre-built workflow templates for faster deployment. These platforms monitor booking events in SimplyBook.me and automatically create or update Webflow CMS items.

Note about synchronization timing: Zapier and Integrately use polling-based synchronization with 5-30 second delays between SimplyBook events and Webflow updates. This approach works well for most booking workflows but is not real-time synchronization.

Common automation workflows using SimplyBook and Webflow through these platforms include:

• Booking to CMS synchronization - New bookings automatically create items in your Webflow bookings collection with client name, service details, appointment time, and status
• Status update synchronization - Booking cancellations or changes trigger automated Webflow CMS item updates to keep your site data current
• Client database management - New SimplyBook.me clients automatically populate your Webflow client collection for unified customer data
• Service catalog automation - New services in SimplyBook.me automatically generate Webflow service pages through automation workflows

Set up automation by connecting your SimplyBook.me account (requires API access enabled in account settings) and Webflow account to your chosen automation platform. Map SimplyBook.me data fields to corresponding Webflow CMS fields, ensuring field types match. Dates map to date fields, emails to email fields, service IDs to number fields. Test with real bookings before enabling production workflows.

Both platforms support conditional logic for advanced scenarios like sending different notifications based on booking status or routing high-value bookings to specific CMS collections.

Build with Webflow and SimplyBook API

The SimplyBook.me 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 interfaces to processing bookings through Webflow form submissions.

Security consideration for client-side API usage: Webflow's static hosting model means all API calls execute client-side in the visitor's browser. Your SimplyBook API credentials will be visible in browser developer tools and network requests. This exposes your API key to potential misuse. For production implementations with sensitive data, consider using serverless functions (AWS Lambda, Cloudflare Workers) as an intermediary to keep credentials secure server-side.

All API requests require authentication through the getToken method. Call POST <https://user-api.simplybook.me/login> using JSON-RPC 2.0 format with your company login and API key (found in Settings → Custom Features → API) to obtain an access token. Tokens expire after one hour and must be refreshed via a new getToken call for long-running sessions. Subsequent authenticated requests require the access token in the X-Token header along with your company login in the X-Company-Login header.

SimplyBook.me's API has rate limits of 5,000 requests per day (standard servers) or 25,000 requests per day (enterprise servers), with a maximum of 5 requests per second. Implement client-side caching for high-traffic booking pages to stay within these limits.

Display real-time availability

Build custom availability displays by combining multiple API methods. The getStartTimeMatrix method returns available time slots for a service and provider within a date range (required parameters are from, to, service_id, provider_id, quantity). Call getWorkCalendar to retrieve working days and hours for a specific month (required parameters are year, month, performerId), and getFirstWorkingDay to identify the next available booking date for a specific provider. The calculateEndTime method determines booking end time based on service duration (required parameters are start_datetime, service_id, provider_id). Documentation at SimplyBook.me Company Public Service Methods.

Use SimplyBook.me's embedded iFrame widget or button widget for booking interface functionality. For advanced customization, custom JavaScript can fetch service and provider data using SimplyBook.me's JSON-RPC 2.0 API (via methods like getStartTimeMatrix for availability, getServiceList for services, and getUnitList for providers). Store booking details selected from the widget in hidden form fields for submission processing.

{
 "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 required parameters including service_id, provider_id, start_datetime (in YYYY-MM-DD HH:MM:SS format), and client object containing name, phone, and email. Collect service selection, provider preference, date, time, and client information through native Webflow form elements. Add custom JavaScript to intercept form submission, transform form data to SimplyBook.me JSON-RPC 2.0 format with proper parameter structure, and call the API with authentication tokens.

The book method requires service_id, provider_id, start_datetime (YYYY-MM-DD HH:MM:SS format), quantity, and a client object containing name, phone, and email. The API returns a booking object with id, startDate, startTime, endDate, and endTime for confirmation display.

Handle validation errors like double bookings or invalid times by displaying error messages to users. Implement reCAPTCHA to prevent spam submissions. Store booking IDs in browser localStorage or sync to Webflow CMS through the API for booking management features.

Manage existing bookings

The updateBooking, cancelBooking, and confirmBooking methods (documented in Company Public Service Methods) enable booking management interfaces directly in Webflow. Using these JSON-RPC 2.0 API methods, you can build a "My Bookings" page where clients retrieve appointments by booking ID, then provide cancel and reschedule functionality through updateBooking and cancelBooking calls with proper authentication headers (X-Token and X-Company-Login).

Cancellations require only the bookingId parameter. Rescheduling works through cancellation followed by new booking creation using the book method. Use the getBookingDetails method to retrieve complete booking information including client data, service details, and appointment times before displaying management options.

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



Required headers for API requests:

• X-Company-Login - Your SimplyBook.me company login identifier
• X-Token - Valid access token obtained from getToken method (valid for 1 hour)

Parameters for the cancelBooking method:

• booking_id (integer, required) - The ID of the booking to cancel
• secure_signature (string, optional) - Security signature for validation

Response on successful cancellation:

{
 "jsonrpc": "2.0",
 "result": true,
 "id": 1
}



Response on error:

{
 "jsonrpc": "2.0",
 "error": {
   "code": -32603,
   "message": "Booking not found or already cancelled"
 },
 "id": 1
}



Sync service and provider data

The getEventList() and getUnitList() methods retrieve all services and providers from your SimplyBook.me account. Fetch this data on page load to populate service selection dropdowns or create dynamic service cards using JavaScript. Each service returns with configuration details including descriptions, durations, and pricing information in the API response.

Build service catalog pages by fetching services through the SimplyBook.me API using the getEventList() method, then creating corresponding Webflow CMS items through the Create Items endpoint. Map service_id, name, description, duration, and price to your Webflow CMS collection fields. Schedule this synchronization to run periodically, ensuring your Webflow site stays current with SimplyBook.me data.

Implement webhook-based updates

Important implementation note: While SimplyBook.me supports webhooks for real-time notifications, implementing webhook receivers requires significant serverless infrastructure beyond Webflow's static hosting capabilities. This approach is suitable only for teams with DevOps resources.

SimplyBook.me provides webhooks for booking events. Since Webflow's static hosting cannot directly receive webhooks, you need intermediary infrastructure. Options include automation platforms like Zapier that accept webhooks and forward data to Webflow, or deploying serverless functions (AWS Lambda, Cloudflare Workers, Netlify Functions) to receive webhook payloads and update Webflow CMS via the API.

Configure webhook receivers to update Webflow CMS items when booking status changes, keeping your site data synchronized. Verify webhook signatures using HMAC SHA-256 cryptographic hash verification (extract signature from X-Simplybook-Signature header, compute HMAC SHA-256 digest of raw JSON payload using webhook secret key, and compare) before processing to prevent unauthorized requests.

Store your webhook secret securely and compute HMAC SHA-256 digests of incoming payloads using your secret key to compare with the signature provided in the X-Simplybook-Signature request header. Reject requests with non-matching signatures. Respond with HTTP 200 to acknowledge receipt.

What you can build

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

• Multi-location fitness studio - Class scheduling system with capacity limits, waitlist management, and package sales. Display real-time class availability across multiple studio locations, instructor profiles with booking links, and member portals for managing recurring class bookings and membership status.
• Professional services booking hub - Consultation scheduling for legal, financial, or coaching services with custom intake questionnaires for client pre-qualification. Implement payment deposits to reduce no-shows, time zone handling for international clients, and automated calendar synchronization (Google Calendar, Outlook) preventing scheduling conflicts.
• Beauty and wellness marketplace - Service provider directory where clients browse stylists, massage therapists, or wellness practitioners by specialty and availability. Each provider page displays personalized booking calendars, service menus with durations and pricing, client reviews, and photo portfolios with integrated package purchasing.
• Educational workshop scheduling - Course and workshop registration with attendance tracking, waitlist automation, and certificate issuance. Build instructor-specific pages showing class schedules, student capacity, and prerequisite requirements with automated enrollment confirmation and reminder sequences.