Booking Widget

The booking widget is a self-contained, dependency-free script that renders the whole booking flow — find instructor → pick lesson → choose time → enter details → pay — on your own site. It calls the Bookings API for you using a publishable key.

Quick start (embed)

Add a container and the script anywhere on your page:

<div id="dds-booking"></div>
<script
  src="https://laabam.app/widget/booking.js"
  data-company="your-company-slug"
  data-key="pk_your_publishable_key"
  data-container="dds-booking"
  data-color="#1e40af"></script>

That's it — the widget renders into #dds-booking and handles every step. When a lesson is booked and a payment gateway is configured, the customer is redirected to checkout; otherwise they see a confirmation with their booking reference.

Configuration (data attributes)

Attribute	Required	Default	Description
data-company	✅	—	Your company slug.
data-key	✅	—	Your publishable key (pk_…). Never use a secret key here.
data-container	—	dds-booking	The id of the element to render into.
data-base	—	https://laabam.app	API base URL.
data-color	—	#1e40af	Primary/accent colour (any CSS colour).

Hosted page (no embedding)

If you'd rather link out than embed, every company has a ready-made hosted booking page:

https://laabam.app/book/{your-company-slug}

It renders the same widget with your logo and name. Link your site's "Book a lesson" button straight to it.

The publishable key

The widget runs in the browser, so it uses a publishable key (pk_…) — there is no secret to leak. Two protections keep it safe to expose:

1. Scope — publishable keys only reach the booking endpoints (never invoices, customers, payments writes, etc.).
2. Origin lock — the key only works from the website origins you allow-list on it. A browser always sends its real Origin on cross-site calls, so the key can't be lifted and used from another site.

Create one in Settings → API Keys (choose Publishable), and add your site's origin (e.g. https://yourschool.com) to its allow-list.

warning

Never put a secret key (lk_secret_…) in a web page. Use it only from your server. See Security.

Theming & placement

• The widget inherits the width of its container (max ~680px, centred). Put the container inside your normal page layout.
• data-color sets the accent used for the active step, buttons and selections.
• It ships with neutral, self-contained styles and won't pull in external CSS.

Online payment

Payment is handled by the API. To charge online, configure an AUD payment gateway under Settings → Payment Gateways and point its webhook at https://laabam.app/api/v1/storefront/{company}/webhook/{stripe|razorpay|paypal}. Without a gateway, bookings are still created (as pending) and the widget shows a confirmation noting you'll arrange payment. See Bookings → Pay for a booking.