# Add a real booking system to Lovable with the Opencals connector > Add Opencals to Lovable as a custom connector and your Lovable app takes real bookings: live availability, cart, checkout and Stripe. Every field ready to copy. URL: https://opencals.com/blog/lovable-booking-system Author: Stanislav Tyshchenko Published: 2026-09-26 Updated: 2026-10-27 Categories: tutorial Lovable is very good at the part of a booking site people look at. It's less good at the part that has to be correct, because with no backend to talk to it invents one: slots in a table, bookings as rows, no idea that two people just picked the same Tuesday 10:00. Lovable's custom connectors fix that properly. A workspace admin registers an API once, attaches a couple of knowledge files telling Lovable how to use it, and every project in the workspace can connect to it without anyone pasting a key into code. This guide sets up Opencals that way. At the end, you describe a business and Lovable builds a site that reads your real services, shows live availability, holds the slot while the customer checks out, and takes payment through your own Stripe account. It takes about ten minutes, and nearly all of it is copy and paste. > **Key takeaway** > > Four steps: create an Opencals storefront key with no allowed origins, create a custom connector in Lovable (Advanced auth with two headers), paste the two knowledge files below, then connect it to a project and describe the business. The key stays in Lovable's connector credentials and never appears in project code. ## Before you start - **An Opencals store.** [Create one free](https://app.opencals.com) and add at least one service with a schedule, so there's something to book. A new store is a free development store that runs payments in Stripe test mode, which is exactly what you want while building. - **Admin or owner rights in your Lovable workspace.** Lovable only lets admins and owners create custom connectors. Everyone else in the workspace can use it once it exists. ## Step 1: a storefront key without allowed origins In the Opencals dashboard, go to **Settings → API Keys** and create a storefront key. Call it "Lovable" so you know where it's used. It starts with `sfk_`. **Leave the allowed origins list empty.** Lovable calls the API from its own servers, and those requests carry no `Origin` header. A key with an origins allowlist rejects them with `401 Origin not allowed for this API key`, which is the single most common setup mistake. That's safe here, because the key never reaches the browser. ## Step 2: create the connector In Lovable, open **Connectors**, click **+** and choose **Custom connector**. Fill in the details section: **Details** **Display name** (The internal ID comes from this and can't change later): `Opencals` **Short description**: `Headless commerce for bookable services: cart, checkout, payments` **Description** (Shown in the catalogue. Copy copies the full text) ``` Opencals is a headless commerce API for selling time: services, sessions, classes, and rentable resources such as courts, rooms and studios. It works like a storefront API: a catalogue of bookable products with variants and add-ons, a cart, checkout, payments, discounts, orders and customer accounts. Every product is time-based, and Opencals handles the availability, capacity and double-booking. Lovable builds the storefront; the merchant's live Opencals store supplies the products, prices and rules. What the app can do: - Catalogue: products with variants, prices, images, collections, staff, locations, and add-ons (fixed or charged per hour) - Real-time availability: exact slots per day or ranges for a calendar, filtered by staff, location and booking length - Cart: hold slots with an expiry timer, add or change add-ons, apply promo codes, automatic discounts, and customer credit (money or prepaid hours) - Checkout: customer details, billing address with company and VAT, delivery address for mobile services, marketing consent per channel, and custom checkout questions including file uploads - Payments: cards through Stripe (paid into the merchant's own connected account), cash, bank transfer, or instant confirmation when nothing is due. Tax-inclusive or tax-exclusive pricing, with authoritative totals from the API - Orders and receipts: an order number, line items, payment status, and invoices - Group classes with capacity and spots left, invited guests, and variable-length bookings (e.g. a court for 60 or 90 minutes) - Customer accounts: email-code or password sign-in, upcoming and past bookings, self-service reschedule and cancel within the merchant's notice rules, profile, and marketing preferences The server side handles availability, timezones, double-booking prevention, pricing, tax, discounts, payment capture, and confirmation and reminder emails. The merchant manages products, staff, schedules, discounts and payment settings in the Opencals dashboard (app.opencals.com). You need an Opencals store and a Storefront API key (sfk_…) created in the Opencals dashboard. ``` **Category**: `E-commerce` **Documentation URL**: `https://opencals.com/docs` **Logo** (Download it and upload the file): `https://opencals.com/images/logo/icon.png` ## Step 3: authentication and the test request Choose **Advanced** as the authentication method. Opencals needs two headers on every request, and Advanced is the method that can hold both: **Authentication (Advanced)** **API base URL**: `https://api.opencals.com` **Field 1: key** (Label: Storefront API key (sfk\_…). Send as header. Secret: yes): `X-Api-Key` **Field 2: key** (Label: API version (enter 1). Send as header. Secret: no): `X-Api-Version` **Test request method**: `GET` **Test request path** (Returns 200 with your store name and currency): `/storefront/stores/public-settings` Don't skip the version header. Every storefront route answers `404 Cannot GET …` without `X-Api-Version: 1`, including the test request, so a missing version looks like a broken URL rather than an auth problem. ## Step 4: the two knowledge files This is what turns Lovable from guessing into knowing. Knowledge files are Markdown that Lovable reads whenever it writes code against the connector. Click **Add knowledge file** twice and paste these. Each is under Lovable's 50,000-character limit. - [Opencals Storefront API](https://opencals.com/ai/opencals-storefront-api.md): Complete endpoint reference: catalogue, availability, cart, appointments, discounts, checkout and payment, customer accounts, reschedule/cancel, errors and rate limits. * [Opencals booking site playbook](https://opencals.com/ai/lovable-booking-site-playbook.md): How to build a booking website on Opencals: choosing the booking flow for the business type, pages and components, slot picker, checkout and payment UX, design and launch checklist. Use the title as the file's **Name** and the line under it as its **Description**. The description is what Lovable reads to decide which file to open, so it's worth copying exactly. The first file is the reference: every endpoint with its real fields, and rules like "the bookable ID is always a variant's `id`" and "slot times are UTC, convert for display only". The second is the part I'd have wanted on day one. It tells Lovable to match the page flow to the business before worrying about looks: a salon books a person, a padel club books a court on a grid, a yoga studio sells spots in a class. It also lists the checks to run before calling the site done. Click **Create**. Opencals now appears in your workspace's connector catalogue. ## Step 5: connect it and describe the business Open the Opencals connector and choose **Add connection**. Paste your `sfk_` key into the first field and `1` into the second. Pick who can use this connection (only you, specific people, or the whole workspace), and Lovable runs the test request. A green check means the key and version header are right. Link the connection to a project, then describe the business rather than the booking system: ```text Build a booking website for Fade & Co, a three-chair barbershop in Manchester. Use the Opencals connector for services, prices, barbers and availability. Customers pick a service, then a barber or "anyone", then a time. Dark and bold: black, off-white, one brass accent. Pages: home, services, booking flow, checkout with card payment, confirmation. ``` No service list, no prices, no opening hours: those come from your store. Add a service in the Opencals dashboard next week and it appears on the site without another prompt. ## What Lovable builds, and one limit to know With the knowledge files in place, Lovable writes a thin server function per operation (list services, get slots, book a slot, start checkout) that calls Opencals through the connector, and a frontend that only talks to those functions. Card payments use Stripe's payment form in the page with the details Opencals returns from checkout, so there's no Stripe connector and no Stripe secret to set up in Lovable. The money goes to the Stripe account connected to your Opencals store. The limit: **rate limits are shared across the whole site.** Opencals limits each key per client IP to 120 requests a minute. Behind Lovable's gateway every visitor arrives from the same address, so one Lovable site gets roughly 120 requests a minute across all of its visitors. That's fine for a single business, and the playbook tells Lovable to cache the catalogue and load availability one day at a time for this reason. If you're planning a launch that sends a crowd to the site at once, [get in touch](https://opencals.com/contact) before it goes out. ## Test one booking before you share the link Run this in the Lovable preview with your development store: 1. The services page shows your real services and prices, and nothing is hard-coded. 2. Days with no availability are disabled, and times show in your local timezone. 3. Book a slot, go to checkout, and pay with Stripe's test card `4242 4242 4242 4242`. 4. The confirmation page shows an order number, and the booking appears in your Opencals dashboard with a confirmation email sent. 5. An invalid promo code shows a clear error, and a real one changes the total. When those pass, switch the store to production in the Opencals dashboard to take real payments, publish the Lovable app, and point your domain at it. Using a different builder? The same setup exists for [v0](https://opencals.com/blog/v0-booking-website) and [Base44](https://opencals.com/blog/base44-booking-app), and the overview of all three is in [build a booking website with AI](https://opencals.com/blog/build-booking-website-with-ai). If your app keeps its users in Supabase, the [Supabase booking system guide](https://opencals.com/blog/supabase-booking-system) shows how to link each booking to a signed-in user. - [Build a booking site with AI](https://opencals.com/blog/build-booking-website-with-ai): Lovable, v0, Base44, Claude Code and Cursor compared for booking sites, and what each one needs. - [Supabase booking system](https://opencals.com/blog/supabase-booking-system): Keep Supabase for users and data, plug in Opencals for availability, carts and payments. - [v0 booking website](https://opencals.com/blog/v0-booking-website): The same real-bookings setup for a site built in v0. - [Base44 booking app](https://opencals.com/blog/base44-booking-app): Real availability and payments in a Base44 app. ## Frequently asked questions ### Does every Lovable project need its own connector? No. An admin creates the connector once per workspace. Each person then adds a connection with a storefront key and links it to the projects that need it. Different projects can use different keys, so one workspace can run sites for several Opencals stores. ### Is my API key visible in the generated code? No. Lovable stores connector credentials encrypted and adds them to requests at its gateway. They don't appear in the project chat or the project's code. ### Why does the test request fail with 404 Cannot GET? The X-Api-Version header is missing. Check that the connector has a second header field with the key X-Api-Version and that the connection has 1 in it. ### Why do I get 401 Origin not allowed? The storefront key has an allowed-origins list. Lovable's server-side requests send no Origin header, so create a separate key for Lovable with the list left empty. ### Do I need a Stripe connector in Lovable? No. Opencals returns the Stripe details for your own connected account at checkout, and the page renders Stripe's payment form with them. Payments go to the Stripe account you connected in the Opencals dashboard. ### Can I use it on Lovable's free plan? Lovable offers custom connectors on all plans, but only workspace admins and owners can create them. Opencals development stores are free with no time limit; you pay only after switching a store to production.