Integration Guide

Everything a site owner needs to embed the Booksea booking widget.

Embed

Add two lines to any HTML page:

<script
  type="module"
  src="https://widget.booksea.org/dist/booksea-widget.min.js"
></script>

<booksea-widget company-slug="your-slug"></booksea-widget>

Replace your-slug with the company identifier you received from Booksea. The URL above always points to the latest release — your site picks up updates automatically.

The widget is a standard Web Component. It works in every modern browser without any framework or build step on your side.

HTTPS required

The payment step uses Stripe, which requires a secure origin. The widget must be served over https://. If your site has a Content Security Policy, ensure it allows frame-src https://js.stripe.com and script-src https://js.stripe.com.

Behaviour

Automatic selection — when only one option is available at any step, the widget selects it silently and moves on. This cascades:

1. One category → selected automatically
2. One service within that category → selected automatically
3. One pricing for that service → selected automatically

A widget set up for a single boat and a single activity will therefore land the customer directly on the date/passenger step with no clicks required.

Pre-selection for dedicated pages — if your site has a page for a specific excursion (e.g. a "Whale Watching" page), use default-category and default-service to skip straight to booking. The customer arrives on your page already knowing what they want — the widget should reflect that.

<!-- On your "Whale Watching" page -->
<booksea-widget
  company-slug="your-slug"
  default-category="excursions"
  default-service="whale-watching"
></booksea-widget>

The selection step is skipped entirely and the customer lands directly on the date and passenger picker. Combined with automatic selection, even a single-pricing service will jump all the way through to step 2 with zero interaction.

Attributes

Configure the widget by setting HTML attributes on the <booksea-widget> element.

Attribute	Required	Default	Description
company-slug	✓	—	Your Booksea company identifier
base-url		https://booksea.crbo.dev	API base URL (rarely changed; contact support before overriding)
default-category		—	Pre-select a category on load
default-service		—	Pre-select a service on load
default-boat		—	Pre-select a boat on load
locale		browser default	Force language — supported values: en, fr

Example — force French on a French-language page:

<booksea-widget
  company-slug="your-slug"
  locale="fr"
></booksea-widget>