Skip to main content

Embedding overview

Customers book on your own website. You put the Sessiq booking flow on your pages with one of three embeds. All three load the same JavaScript widget bundle, so the booking experience is the same everywhere.

Which embed to use​

Your siteUsePage
WordPressThe Sessiq Booking Widget pluginWordPress plugin
Astro (static or on Cloudflare Workers)The Astro integration and componentsAstro package
Anything else (plain HTML, other CMS, SPA)The JavaScript widget with a <script>JavaScript widget
  • WordPress. Install the plugin, enter your tenant details once in Settings → Sessiq, then add shortcodes or blocks to pages. No code needed.
  • Astro. Add the integration to astro.config, then drop components such as <SessiqBookingWidget /> on pages. It handles script order, View Transitions, the Paytrail return page, an optional same-origin API proxy and CSP helpers.
  • Plain JavaScript. Host the widget files, call Sessiq.init(...) and add <div> placeholders with sessiq-* classes. The other two embeds produce exactly this markup for you.

What you can embed​

Every embed offers the same building blocks:

  • Booking flow — the full booking process for one product, or a location-first flow where the customer picks a site and then an activity.
  • Product card and product grid — cards with a Book Now button. The button opens the flow in a pop-up or links to your booking page.
  • Availability calendar — shows free times. Picking a time sends the customer to your booking page.
  • Courses — a course grid, one course product's terms, or enrolment in a single course.
  • Waiver — a standalone page for signing waivers.
  • Campaign calendar — an advent-style calendar of daily offers.

The booking flow​

The booking flow is the canonical booking component. It walks the customer through date and time, participants, add-ons, checkout offers, contact details, waivers, review and payment, then shows the confirmation. See Booking flow for what the customer sees.

The single-product booking widget (sessiq-booking-widget-container, [sessiq_widget], <SessiqBookingWidget />) is a thin adapter over the same flow, started at a fixed product. Fixes and new features land in the flow, so both behave the same.

Before you start​

You need:

  • your Sessiq API URL and tenant ID
  • optionally a site ID, to theme the widget with that site's colours
  • optionally a public, read-only API key

Then allow your website's origin for the site. In the admin, open Catalog → Sites, edit the site and add your domain, for example https://example.com, under Allowed widget origins. The browser blocks API calls from origins that are not on the list. The Astro package's same-origin proxy is the one exception, see Astro package.

If the page shows the booking widget, also enter its address as the site's Booking page URL. Campaign calendars on your other sites link there to book this site's products (see Book-now links).

Next steps​