Everything you need to publish GetItBooked on the web. Embed the booking widget with one script tag, or share a hosted booking page when you just need a link.
Add the following snippet to your HTML where you want the booking widget to appear:
<div id="booking-widget"></div>
<script
src="https://getitbooked.app/widget.js"
data-token="YOUR_TOKEN"
data-target="booking-widget">
</script>Replace YOUR_TOKEN with the embed token from your Widget settings page. Tokens are shown in full only when generated, so copy the token or snippet before leaving
the page.
If you do not want to edit a website, use a hosted booking page instead. Generate a token from the Widget page, then copy the hosted link shown for that token:
https://getitbooked.app/book/TOKEN_IDHosted links use the token ID from the dashboard URL, not the secret embed token itself. They respect the hosted-page enabled/disabled setting and use the same widget theme, terminology, Stripe readiness, and availability rules as the embed.
Configure the widget using data-* attributes on the script tag.
| Attribute | Required | Description |
|---|---|---|
data-token | Required | Your embed token. Generate one from the Widget page in your dashboard. |
data-target | Optional | The id of the container element to mount the widget into. If omitted, a new div is appended to the document body. |
data-display-mode | Optional | Controls how dates are presented. Accepts calendar or list. Overrides the display mode set in your dashboard theme settings. |
The script derives the API base URL from its own src attribute, so requests go back to the same GetItBooked host that served widget.js. The data-hosted flag is reserved for GetItBooked-hosted pages and is not needed for normal embeds.
The widget supports two display modes for date selection. You can set the default in your
dashboard or override it per embed with the data-display-mode attribute.
calendarShows a full month calendar with available dates highlighted. Customers click a date to see available timeslots. Best for businesses with availability spread across many dates.
listShows a scrollable list of upcoming dates with their timeslots. More compact and linear. Best for businesses with fewer, more spread out available dates.
Widget colours are configured from your Widget settings page in the dashboard. The widget loads your theme, display mode, terminology, and payment readiness from the API at runtime, so changes apply without updating your embed code.
| Property | CSS Variable | Default | Description |
|---|---|---|---|
| Primary colour | --gib-primary | #3b82f6 | Buttons, links, and active states |
| Text colour | --gib-text | #111827 | Main body text |
| Background colour | --gib-bg | #ffffff | Widget card background |
| Border colour | --gib-border | #e5e7eb | Card and input borders |
Use data-target to mount the widget inside a specific element on your page. This gives you full control over placement
and sizing.
<!-- Place the widget inside a specific section -->
<section class="booking-section">
<h2>Book Your Spot</h2>
<div id="my-booking-widget"></div>
</section>
<script
src="https://getitbooked.app/widget.js"
data-token="YOUR_TOKEN"
data-target="my-booking-widget">
</script>If data-target is omitted or the element is not found, the widget creates its own container and appends it to the
document body.
The widget automatically adapts its UI based on the booking type configured for each tour in your dashboard. No extra code needed.
Customer picks one date and timeslot. The standard booking flow for tours, classes, and appointments.
Customer selects a pricing tier then picks multiple dates. Ideal for multi-session packages like training blocks or lesson bundles.
Pre-defined set of dates at a fixed price. The customer books the entire course in one go.
The widget calls the availability API with the embed token, then receives active tours, timeslots, available dates, remaining capacity, theme, terminology, and Stripe readiness.
Single-session bookings submit one date and timeslot. Block and course bookings submit a sessions array, and GetItBooked calculates the relevant total from your dashboard pricing.
Paid bookings require the operator's Stripe onboarding to be complete. Stripe.js is loaded automatically only when the customer reaches the payment step.
After successful payment, GetItBooked finalises the booking and sends confirmation email. Customers can use secure email links to cancel eligible bookings.
When the same setting can be configured in multiple places, the widget uses this priority order (highest to lowest):
data-* attributes on the script tagEmbedded widgets are only authorised from domains listed in Widget settings. Add hostnames
only, such as www.example.com, without https://. If no domains are configured, third-party embeds are rejected.
The widget injects the Stripe.js script when a customer reaches the payment step. You don't need to include it yourself.
The widget renders directly in your page DOM, not inside an iframe. This means it inherits your page's fonts and can be styled with CSS if needed.
You can embed multiple widgets on the same page by using different data-target containers and separate script tags, each with their own token.
Widget API endpoints return CORS headers for authorised origins. Preflight requests are answered before token validation, but the actual API request still checks the token and allowed-domain list.
The current /widget.js response is served with no-cache headers, so sites pick up the latest widget build without changing
the embed snippet.