Bookla

Connect Bookla with Webflow to take appointment, class, and ticket bookings directly on your site.

Webflow's native tools collect booking requests; availability checks, slot holds, class attendance caps, and deposits require a booking system. Salons, sports clubs, and museums that publish on Webflow still end up confirming bookings by phone or email. Each manual confirmation costs staff time and gives the customer a reason to leave.

Bookla adds that scheduling layer to a Webflow page. Its widget renders live availability inside your layout. Visitors pick a slot, fill in any custom form fields, and start the booking flow from the embedded widget. Depending on the payment provider, payment may redirect the visitor before returning to Webflow. For custom builds, Bookla's REST API and webhooks let you create bookings from Webflow form submissions or push services into the Webflow CMS.

Freelancers use it for round-the-clock self-service appointments on salon and clinic sites. Consultant sites use the same setup. Agencies can manage recurring classes and capacity-limited group slots for fitness studios and padel clubs. Escape rooms can use it for capacity-limited slots too. Multi-location and enterprise booking experiences use the API path to keep the booking UI fully on brand.

How to integrate Bookla with Webflow

What is Bookla? Bookla is an API-first booking and scheduling platform run out of Riga, Latvia. Its API documents six service types, with booking policies for confirmation, instant, prepayment, and deposit. Payments run through Stripe, Mercado Pago, Klix, Montonio, or Decta, and the platform exposes a REST API, webhooks, and SDKs for iOS, Android, Flutter, and TypeScript.

Teams pair the two when a Webflow site already carries the marketing pages and needs booking without a second front end. Bookla's case studies for Sigulda Sports Centre and RSU Anatomy Museum both report staff spending less time on phone calls after moving to predefined time slots and visitor-count limits. Those case studies show comparable Bookla booking patterns, though they aren't confirmed as Webflow implementations. The Bookla widget drops into a Webflow page, so the booking step happens on the page a visitor has already reached.

The Bookla-Webflow integration supports 3 approaches:

• The Bookla app handles widget placement and styling on the canvas without writing code.
• The Code Embed element lets you paste Bookla's standalone JS widget and set its options in code.
• The Webflow and Bookla APIs give you full control over booking creation, CMS sync, and payment verification, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Install the Bookla app

Four values are required before the Bookla app in the App Marketplace can place a configured booking widget on the canvas: the API Region, Company ID, Service ID, and an API Key. It suits designers and site owners who already have a Bookla account with at least one bookable service. Bookla's Webflow guide tells you to create at least one Fixed, Flexible, Group, or Ticket service, and says the connected widget shows live data for every service type except Days. Days is Bookla's long-term type for guest houses and hotel stays, so a booking flow built on it cannot use the widget at all.

To set up the integration:

1. In Bookla, create a Company, add Resources with working hours, and create a Service. Link them under Services > Links > Link with Resource.
2. Generate a key at Developers > API Keys > Create API Key. Bookla shows the full key only once, so copy it immediately.
3. Copy the Company ID from your company card in the top-left menu, and the Service ID from the service's detail view.
4. Open the Bookla listing in the App Marketplace, click Install App, choose your site, and click Authorize App. You can also open Apps on the canvas and search for Bookla.
5. In Webflow, open the page where the widget belongs and launch the Bookla app.
6. In the Bookla API panel, choose the API Region, then paste the Company ID, Service ID, and API Key.
7. Click Add to Canvas and publish the site.

The app's controls cover:

• Service formats: One widget renders Bookla's Fixed, Flexible, Group, and Ticket services, so appointments, open-duration rentals, capped classes, and ticketed entry all run from the same embed.
• Payments: Bookings can take payment through whichever provider you have enabled in Bookla, which supports Stripe, Mercado Pago, Klix, Montonio, and Decta.
• Guest mode: Visitors can book without signing in, and you can rewrite the labels and error messages on the required name and email fields.
• Theme controls: Style, Layout, and Typography panels set theme colors, spacing, font family, sizes, and line heights, with padding and corner radius editable per element state.
• Text and locale: The Config section sets the locale, which drives the widget's date format and language, and it exposes every visible label for editing.

With empty API fields the widget runs in Test Mode, previews a fixed-type service, and shows the message "Connect the Bookla API to add live data." The install asks for four Webflow scopes: sites:read, authorized_user:read, custom_code:read, and custom_code:write. It requests nothing on CMS data, so two-way sync between bookings and Webflow CMS sits outside what the app can do and belongs on the API path below.

Add the Bookla widget with Code Embed elements

A <div> container and a <script> tag make up Bookla's standalone JS component, the same widget the app installs. Use it when you want the initialization options in code, need the widget on many pages, or want the loader script in one place. The Code Embed element accepts HTML, CSS in <style> tags, and JavaScript in <script> tags, up to 50,000 characters. You need a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan, to use it. Bookla describes the widget as fully customizable, covering colors, spacing, typography, localization, behavior, and form fields without writing CSS by hand.

Paste the widget into a Code Embed element

The single-embed path keeps the container, loader, and initialization together on one page. It is the quickest way to place the widget where the app's layout controls don't match your design.

To add the widget:

1. Open the Add panel and drop a Code Embed element where the widget should render.
2. Paste the container and loader script:

<div id="bookla-booking-widget" class="bookla-widget"></div>
<script src="https://bookla.pages.dev/booking-widget-standalone-v1.6.2.global.js"></script>

3. Below it, add the initialization call inside a <script> tag:

const container = document.getElementById('bookla-booking-widget');
BookingWidgetStandalone.initBookingWidget(container, {
  apiKey: 'your-api-key',        // Required
  region: 'US',                  // Required: "US" or "EU"
  companyId: 'your-company-id',  // Required
  serviceId: 'your-service-id',  // Optional: pre-select a service
});

4. Click Save and close, then publish.

Code Embed accepts only the fragments above; omit <html>, <head>, and <body> tags.

Load the loader script site-wide with custom code

When several pages carry a widget, add the loader <script> once in Site settings and keep only the container and init call on each page. Webflow documents that under custom code in head and body tags, with the same plan requirement and a 50,000 character limit per section.

To load the script once:

1. Go to Site settings > Custom code > Footer code, paste <script src="https://bookla.pages.dev/booking-widget-standalone-v1.6.2.global.js"></script>, and click Save changes.
2. On each booking page, add a Code Embed with the <div id="bookla-booking-widget" class="bookla-widget"></div> container and the initialization script. Change serviceId per page to pre-select that page's service.
3. Or move the init script to Page settings > Before </body> tag under Custom code, so the page's Code Embed holds only the container.
4. Publish the site.

Custom code shows in preview but goes live only after publishing. The widget loads the bookla.pages.dev script directly and avoids iframe restrictions. The native consent management APIs cover only Analyze and Optimize, so your own cookie banner or CMP has to govern the Bookla script.

Build with the Webflow and Bookla APIs

Keep Bookla keys, custom booking creation, CMS sync, and payment verification on a server. Webflow Cloud, Vercel, Cloudflare Workers, or your own backend can host that server. Webflow Cloud runs Next.js 15+, Astro 6/7, or Vite 6.1+ apps on Cloudflare Workers, mounted at a path such as /app on your domain.

The APIs involved:

• Bookla Platform API handles services, resources, availability, bookings, clients, and payments at https://{region}.bookla.com/api/v1, with an x-api-key header for merchant operations
• Webflow Data API handles CMS collections and form submissions with a Bearer token
• Webflow webhooks fire on form_submission and CMS item events such as collection_item_created and collection_item_published
• Bookla webhooks POST JSON to your HTTPS endpoint for Booking created, Booking updated, Service created, and Resource updated

Our walkthrough of creating API wrappers on Webflow Cloud shows the proxy pattern that keeps a third-party key server-side.

Create a booking from a Webflow form submission

A native Webflow form can feed Bookla when you want a booking request UI that matches the site exactly. The form needs fields for the service, the resource, and the requested start time.

To implement this:

1. Register the webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks. Include triggerType: "form_submission" and your server URL in the request.
2. On submission, your endpoint receives name, siteId, formId, data, and submittedAt. Return a 2xx right away and process the data fields asynchronously.
3. Check the slot with POST /api/v1/companies/{company_id}/services/{service_id}/times, sending from and to as RFC3339 timestamps under the x-api-key header.
4. Create the booking with POST /api/v1/companies/{company_id}/bookings. The body requires resourceID, serviceID, and startTime.
5. Store the returned booking ID for your confirmation email or status page.

The service's booking policy (confirmation, instant, prepayment, or deposit) decides what state the new booking enters.

Sync Bookla services into the Webflow CMS

Service pages, filters, and a Collection List of bookable items can all draw from a CMS Collection populated with Bookla services and resources. The CMS's own design tools control their presentation.

To sync services:

1. Fetch GET /api/v1/companies/{company_id}/services with x-api-key.
2. Read the target collection's schema with GET https://api.webflow.com/v2/collections/{collection_id} (scope cms:read) and map Bookla fields to fieldData keys.
3. Create items with POST /v2/collections/{collection_id}/items and an items array. Sending both fieldData and items in one request returns a 400. The separate /items/bulk endpoint takes up to 100 items per request.
4. Publish with POST /v2/collections/{collection_id}/items/publish and the itemIds, or write to /v2/collections/{collection_id}/items/live to publish immediately.
5. For ongoing updates, add your endpoint in Bookla under Developers > Webhooks > Add New Endpoint, then Add Subscription for Service created and Resource updated. On receipt, call PATCH /v2/collections/{collection_id}/items/{item_id}.

Bookla's webhook docs publish only one machine-readable type, event.gateway.resource.created, with a data object of id, name, color, companyID, createdAt, and updatedAt. Authenticate deliveries by allowlisting the documented source IP, 139.59.139.87, because the webhook docs provide no signature. Deliveries may be retried, so dedupe on the envelope id.

Verify Stripe prepayment redirects on a Webflow page

When a service uses Bookla's Prepayment policy with Stripe, Bookla redirects the visitor back to URLs you set. Point those at Webflow pages and confirm each redirect server-side before showing a receipt. This is the one API flow Bookla documents end to end.

To implement this:

1. Enable the Stripe Payments plugin in Bookla and set the service's Booking Policy to Prepayment.
2. Enter your Webflow success, cancel, and failure page URLs as the redirect URLs.
3. Turn on URL templating for that provider and set a signing secret. Both default to off, and until they are set Bookla passes your redirect URLs through unsigned.
4. Bookla then appends ts and sig, a hex-encoded HMAC-SHA256 of the templated parameters and the timestamp. A signature stays valid for 5 minutes from its ts.
5. Forward every query parameter you received to GET /api/v1/companies/{company_id}/payments/verify-signature. A { "valid": true } response confirms the redirect, and a failure returns a reason code such as signature_expired.

Stripe webhooks deliver payment status events. Subscribe to Stripe for charge confirmation and read Bookla's redirect URL templating page for the parameter details.

What you can build with the Bookla Webflow integration

The booking flow stays on your Webflow pages while Bookla applies payment and capacity rules without a separate booking site or a hand-built scheduler.

• Appointment booking with deposits: A dental clinic site lists treatments as CMS Collection pages and carries a Bookla widget on each. The service uses the deposit booking policy, so patients pay part of the fee up front, and Bookla's email notifications send the confirmation.
• Recurring classes with capacity caps: A yoga studio site uses Bookla's Group service type with RRULE recurring schedules. Students register into a weekly slot until it fills, the same predefined-slot model Bookla's Sigulda Sports Centre case study credits for cutting phone bookings.
• Timed-entry ticketing: A museum site sells timed tickets through the Ticket service type with visitor-count limits. Bookla's RSU Anatomy Museum case study credits that setup with organizing visitor flow and avoiding queues, and tickets are validated with a QR scanner or against the slot's client list.
• Memberships sold alongside bookings: A fitness studio site embeds the widget for classes and uses Bookla's Subscriptions plugin with Stripe Product and Price IDs for memberships. Renewals run daily, weekly, monthly, or yearly, and each subscription sets its own visits limit.

If you need more control over multi-location availability or booking records inside the CMS, the API integration path covers those cases with full flexibility. For a capacity-limited event flow that runs on Webflow forms and the CMS instead of a booking platform, follow our guide to building an event registration system.