JavaScript widget

The JavaScript widget works on any website. You load one script and one stylesheet, call Sessiq.init once, and add placeholder <div> elements. The widget finds the placeholders and renders into them.

The WordPress plugin and the Astro package both use this widget. If your site runs on one of them, use WordPress plugin or Astro package instead.

Add the widget to a page

The widget is two files: sessiq.min.js (it defines the global Sessiq) and sessiq.min.css. Host both on your own site. Ask Sessiq for the current build; the same files ship inside the WordPress plugin under public/js/ and public/css/.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/sessiq/sessiq.min.css" />
    <script>
      // Only needed if you use a tag manager. See "Analytics and consent".
      window.dataLayer = window.dataLayer || [];
    </script>
  </head>
  <body>
    <div
      class="sessiq-booking-widget-container"
      data-product-id="your-product-id"
    ></div>

    <script src="/sessiq/sessiq.min.js"></script>
    <script>
      Sessiq.init({
        apiUrl: 'https://api.example.com',
        tenantId: 'your-tenant-id',
        siteId: 'your-site-id',
      });
    </script>
  </body>
</html>

Call Sessiq.init after the script has loaded and the placeholders are in the page. init scans the page once. If you add placeholders later, call Sessiq.rescan().

Your site's origin must be on the site's Allowed widget origins list. See Before you start.

Configuration

Sessiq.init takes one configuration object.

Option	Type	Required	Description
apiUrl	string	Yes	The Sessiq API origin. Trailing slashes are removed.
tenantId	string	Yes	Your tenant ID. Sent with every API request.
siteId	string	No	The site the embed belongs to. The widget then uses that site's branding colours; without it, account-level branding applies. One site ID per page.
apiKey	string	No	A public API key, sent with every request. It is visible in the page source, so use a read-only key.
bookingBaseUrl	string	No	Base URL of your customer booking portal. The availability calendar sends customers to <bookingBaseUrl>/book/<productId> when they pick a time. Without it, picking a time does nothing.
primaryColor	string	No	Accent colour. See Theming for how it combines with your branding.
buttonColor	string	No	Button colour.
backgroundColor	string	No	Base panel background, for example the calendar and the pop-up booking window.
surfaceColor	string	No	Raised panels such as headers, rows and steppers.
surfaceAltColor	string	No	Deeper neutral surface, for example unavailable days. Falls back to surfaceColor.
textColor	string	No	Widget text colour.
borderColor	string	No	Borders and dividers.
termsUrl	string	No	Link to your terms and conditions, shown in the checkout.
privacyUrl	string	No	Link to your privacy policy, shown in the checkout and under the campaign calendar's newsletter checkbox.
locale	string	No	Display language for dates, times, prices and labels from the API, for example fi or en. Without it, the widget uses the page's <html lang>, then the browser default.
debug	boolean	No	Logs extra detail to the browser console.

Interface text

The widget's own labels (buttons, headings, messages) come from window.sessiqStrings, a table of text keys. Any key that is missing falls back to the built-in English text. The WordPress plugin and the Astro package fill this table in English or Finnish for you. On a plain HTML page, set window.sessiqStrings before Sessiq.init if you need a language other than English.

tip

Set lang correctly on every page, for example <html lang="fi">. The widget formats dates, times and prices in that language, and asks the API for product and add-on labels in it.

Placeholders

Each placeholder is a <div> with one of the classes below. The widget reads its settings from data-* attributes. For true/false attributes, use the strings "true" and "false". Attributes without a default in the table are simply left out.

Booking flow for one product

sessiq-booking-widget-container — the full booking flow for one product.

The flow asks for the group size first, then the date and time, so the calendar and the time list only offer days and times with room for that group. Products for one person at a time skip the group-size step, and products with a choice of length ask for the duration before the group size. If the customer changes the group size later, a time that still fits is kept; otherwise they're asked to pick another time or day. The rest of the flow (room, add-ons, contact, review, payment) follows.

Attribute	Default	Description
data-product-id	—	Required. The product to book.
data-show-steps	true	Show the step progress bar. Only "false" turns it off.
data-compact	false	Compact layout. Only "true" turns it on.
data-success-url	this page	Where the customer returns after a redirect payment (Paytrail, Stripe 3-D Secure).
data-cancel-url	this page	Where the customer lands if they cancel a redirect payment.
data-powered-by	false	Show a small "Powered by Sessiq" badge.
data-default-view	month	First calendar layout on the date step: month or week. Customers can switch.

Location-first booking flow

sessiq-party-selector-container — the same booking flow, but the customer first picks a location and an activity. Use it for "book a party" or "book an activity" pages that cover several products or sites.

Attribute	Default	Description
data-product-tag	—	Only offer products with this product tag.
data-product-ids	—	Comma-separated list of product IDs to offer. Takes precedence over the tag.
data-site-ids	—	Comma-separated list of site IDs for the location step. Unknown IDs are ignored and the order is kept. One site skips the step.
data-show-steps	true	Show the step progress bar.
data-compact	false	Compact layout.
data-success-url	this page	Return URL after a redirect payment.
data-cancel-url	this page	Return URL if the customer cancels a redirect payment.
data-powered-by	false	Show the "Powered by Sessiq" badge.
data-default-view	month	First calendar layout: month or week.
data-item-list-id	booking_products	Analytics item_list_id for the product list. See Analytics and consent.
data-item-list-name	"Activities"	Analytics item_list_name for the product list. The default is the translated interface label, so it changes with the page language.

With neither data-product-tag nor data-product-ids, all bookable products at the chosen site are offered.

Product card

sessiq-product-card — one product with a Book Now button.

Attribute	Default	Description
data-product-id	—	Required. The product to show. A course product shows its course terms.
data-show-name	true	Show the product name.
data-show-price	true	Show the price.
data-show-description	true	Show the description.
data-button-text	"Book Now"	Button label. The default is translated.
data-use-modal	false	Open the booking flow in a pop-up window instead of linking to the booking page.

Product grid

sessiq-products-grid — a grid of product cards.

Attribute	Default	Description
data-site-id	—	Only show products of this site.
data-limit	12	Maximum number of products.
data-columns	3	Number of columns.
data-order-by	API order	name (alphabetical) or price (cheapest first). Anything else keeps the API order.
data-show-name	true	Show product names.
data-show-price	true	Show prices.
data-show-description	true	Show descriptions.
data-button-text	"Book Now"	Button label.
data-use-modal	false	Open the booking flow in a pop-up window.

Availability calendar

sessiq-calendar-widget — free times for one product. Picking a time opens bookingBaseUrl with the time pre-selected, so set bookingBaseUrl in the configuration.

Attribute	Default	Description
data-product-id	—	Required. The product.
data-months	2	How many months of availability to load.
data-show-prices	true	Show prices on times.
data-min-party-size	1	Smallest party size the customer can pick.
data-max-party-size	20	Largest party size the customer can pick.
data-default-view	month	First layout: month or week.

Course grid

sessiq-courses-grid — a grid of courses. Each card opens the term picker and enrolment.

Attribute	Default	Description
data-site-id	—	Only show courses of this site.
data-columns	3	Number of columns.
data-order-by	date	date (earliest upcoming session first), name or price.
data-show-steps	true	Show the step progress bar in enrolment.
data-success-url	this page	Return URL after a redirect payment.
data-cancel-url	this page	Return URL if the customer cancels a redirect payment.

Course product

sessiq-course-product-container — one course product. It opens straight on that product's terms and times, with no grid step.

Attribute	Default	Description
data-product-id	—	Required. The course product.
data-site-id	—	Only show terms at this site.
data-show-steps	true	Show the step progress bar.
data-success-url	this page	Return URL after a redirect payment.
data-cancel-url	this page	Return URL if the customer cancels a redirect payment.

Single course

sessiq-course-widget-container — enrolment in one course. When the course is full, the customer can join the waitlist.

Attribute	Default	Description
data-course-id	—	Required. The course.
data-show-steps	true	Show the step progress bar.
data-compact	false	Compact layout.
data-success-url	this page	Return URL after a redirect payment.
data-cancel-url	this page	Return URL if the customer cancels a redirect payment.

Waiver

sessiq-waiver-standalone — waiver signing on its own page. Give at least one of the two IDs; otherwise nothing renders.

Attribute	Default	Description
data-booking-id	—	The booking whose participants sign.
data-product-id	—	The product whose waiver template is used when there is no booking yet.
data-signature-mode	both	typed, drawn or both.

Campaign calendar

sessiq-campaign — an advent-style campaign calendar. See Campaigns.

Attribute	Default	Description
data-campaign-slug	—	The campaign to show. Without it, the single active campaign is shown; with none or several active, a "not available" message is shown.
data-return-url	this page	Return URL for prepaid offers paid by redirect.

When the campaign has a marketing opt-in, the claim and purchase forms show the opt-in box. The calendar's Book now buttons link to the product's own site; see Book-now links below. The calendar also pushes campaign analytics events; see Analytics and consent.

Book-now links

A page with the booking widget reads two query parameters, so that a campaign calendar on another site can send customers straight to booking:

Parameter	Effect
sessiq_product	Opens the booking window for this product when the page loads.
sessiq_code	A campaign code. It is applied at the payment step, first as a discount code and then as a voucher. If neither works, it stays in the discount field with the error message.

For example, https://brand.fi/varaa?sessiq_product=p_123&sessiq_code=ADV5-K3M9.

The product must belong to one of the page's sites: the siteId in the configuration, or a data-site-id / data-site-ids on any placeholder on the page. A product of another site is ignored, and the page shows as normal. A page that names no site at all opens any product, because the link was built from this site's Booking page URL.

Set the page's address as the site's Booking page URL in Catalog → Sites; the campaign calendar builds the links from it.

Methods

Sessiq is available as window.Sessiq once the script has loaded.

Method	Description
init(config)	Stores the configuration, applies colours, loads branding, renders every placeholder on the page and resumes a returning redirect payment.
rescan()	Renders placeholders added since the last scan. Placeholders already rendered carry data-sessiq-mounted="true" and are skipped, so it is safe to call repeatedly. Does not reload branding. Call it after client-side navigation.
loadBranding()	Fetches the site or account branding and applies its colours. init calls it for you.
handlePaymentReturn()	If the page was reached from a redirect payment, reopens the result. init and rescan call it for you.
openBookingModal(productId, options?)	Opens the booking flow for a product in a pop-up window. Options: showSteps, successUrl, cancelUrl, onComplete(bookingId), onClose().
renderBookingWidget(el, productId, options?)	Renders the single-product booking flow into an element. Options: showSteps, compact, successUrl, cancelUrl, onComplete(bookingId), poweredBy, defaultView.
renderPartySelector(el, options?)	Renders the location-first flow. Options as above, plus productTag, productIds, siteIds, itemListId, itemListName.
renderProduct(el, productId, options?)	Renders a product card. Options: showName, showPrice, showDescription, buttonText, useModal.
renderProducts(el, options?)	Renders a product grid. Options: siteId, limit, columns, orderBy, and the product card options.
renderCalendar(el, productId, options?)	Renders an availability calendar. Options: weeks, viewMode, showPrices, minPartySize, maxPartySize, onSlotSelect(slot, date, partySize).
renderCourseList(el, options?)	Renders a course grid. Options: siteId, productId, columns, orderBy, showSteps, successUrl, cancelUrl, onComplete(bookingId).
renderCourseProduct(el, productId, options?)	Renders one course product's terms. Same options as renderCourseList.
renderCourseWidget(el, courseId, options?)	Renders enrolment for one course. Options: showSteps, compact, successUrl, cancelUrl, onComplete(bookingId).
renderWaiver(el, options)	Renders waiver signing. Options: bookingId, productId, signatureMode, onComplete().
renderCampaign(el, options?)	Renders a campaign calendar. Options: slug, returnUrl.
initProductCards(), initProductGrids(), initCalendars(), initBookingWidgets(), initPartySelectors(), initCourseLists(), initCourseProducts(), initCourseWidgets(), initWaivers(), initCampaigns()	Scan for one kind of placeholder. rescan() runs all of them.

Use the render* methods when you build the page in JavaScript, for example to get the onComplete callback:

Sessiq.renderBookingWidget(
  document.getElementById('booking'),
  'your-product-id',
  {
    onComplete: (bookingId) => {
      console.log('Booked', bookingId);
    },
  },
);

Single-page apps

init renders the placeholders that exist when it runs. After a client-side route change, call Sessiq.rescan() once the new placeholders are in the page. Call init only once per page load.

Redirect payments

Paytrail bank payments and some card payments (3-D Secure) leave your page and come back. The widget adds a marker to the return URL and remembers the booking in the browser tab. When the page loads again, init sees the marker and shows the payment result. The return URL is the current page unless you set data-success-url / data-cancel-url. Any page you return to must also load the widget.