WordPress plugin
The Sessiq Booking Widget plugin puts the booking flow on a WordPress site with shortcodes or Gutenberg blocks. It loads the JavaScript widget for you and passes your settings to it.
Current version: 1.1.56. It requires WordPress 6.0 or later and PHP 8.0 or later.
Install
- Get the plugin zip file from Sessiq.
- In WordPress, open Plugins → Add New Plugin → Upload Plugin, choose the zip and click Install Now.
- Click Activate.
- Open Settings → Sessiq and fill in the API settings (below).
- Add your website's address to the site's Allowed widget origins in the Sessiq admin. See Before you start.
To update, upload the new zip the same way and let WordPress replace the installed version.
Settings
Open Settings → Sessiq. The page has three sections and a Test Connection button, which tries to load one product with your settings and reports whether it worked.
The widget only loads on your pages once API URL and Tenant ID are both set.
| Section | Setting | Default | Description |
|---|---|---|---|
| API Configuration | API URL | empty | The base URL of your Sessiq API. |
| API Configuration | Tenant ID | empty | Your Sessiq tenant identifier. |
| API Configuration | Site ID | empty | Optional. The widget uses this site's branding colours. Leave it blank to use account-level branding. |
| API Configuration | Public API Key | empty | Optional. Create one in the Sessiq admin under Settings → API Keys. It is included in the page source and visible to visitors, so use a read-only key. |
| API Configuration | Booking Page URL | empty | Base URL of your customer booking portal. The availability calendar sends customers there. https:// is added and trailing slashes removed. |
| Appearance | Primary Color | #3B82F6 | Main accent colour. |
| Appearance | Button Color | #10B981 | Colour of booking buttons. |
| Appearance | Background Color | empty | Optional. Base panel background, including the pop-up booking window. Empty means white. |
| Appearance | Surface Color | empty | Optional. Raised panels such as headers, rows and steppers. |
| Appearance | Text Color | empty | Optional. Set it together with a dark Background Color for a dark theme. |
| Appearance | Border Color | empty | Optional. Dividers and borders. |
| Legal | Terms & Conditions URL | empty | Linked in the booking review step. |
| Legal | Privacy Policy URL | empty | Linked in the booking review step. |
Your Sessiq branding colours take priority over Primary Color and Button Color once they load. Set your brand colours in the Sessiq admin under Settings → Branding or on the site. See Theming.
The widget's language follows the WordPress site language. The interface text is Finnish when the site language is fi or fi_FI, and English otherwise.
Shortcodes
Add a shortcode to any page or post, for example [sessiq_widget product_id="your-product-id"]. For true/false attributes use true or false. A shortcode that is missing a required ID outputs nothing.
| Shortcode | What it shows | Widget placeholder |
|---|---|---|
[sessiq_widget] | The booking flow for one product | sessiq-booking-widget-container |
[sessiq_flow] | The location-first booking flow | sessiq-party-selector-container |
[sessiq_party] | Alias of [sessiq_flow], kept for existing pages | sessiq-party-selector-container |
[sessiq_product] | One product card | sessiq-product-card |
[sessiq_products] | A grid of product cards | sessiq-products-grid |
[sessiq_calendar] | An availability calendar | sessiq-calendar-widget |
[sessiq_courses] | A grid of courses | sessiq-courses-grid |
[sessiq_course_product] | One course product's terms | sessiq-course-product-container |
[sessiq_course] | Enrolment in one course | sessiq-course-widget-container |
[sessiq_waiver] | Standalone waiver signing | sessiq-waiver-standalone |
[sessiq_campaign] | An advent-style campaign calendar | sessiq-campaign |
The JavaScript widget page explains what each attribute does in more detail.
[sessiq_widget]
| Attribute | Default | Description |
|---|---|---|
product_id | — | Required. The product to book. |
show_steps | true | Show the step progress bar. |
compact | false | Compact layout. |
success_url | empty | Return URL after a redirect payment. Empty means this page. |
cancel_url | empty | Return URL if a redirect payment is cancelled. Empty means this page. |
powered_by | false | Show a "Powered by Sessiq" badge. |
default_view | month | First calendar layout: month or week. |
[sessiq_flow] and [sessiq_party]
Both names run the same code. Use [sessiq_flow] on new pages.
| Attribute | Default | Description |
|---|---|---|
product_tag | empty | Only offer products with this product tag. |
product_ids | empty | Comma-separated product IDs to offer. Takes precedence over product_tag. |
site_ids | empty | Comma-separated site IDs for the location step. One site skips the step. |
show_steps | true | Show the step progress bar. |
compact | false | Compact layout. |
success_url | empty | Return URL after a redirect payment. |
cancel_url | empty | Return URL if a redirect payment is cancelled. |
powered_by | false | Show the "Powered by Sessiq" badge. |
default_view | month | First calendar layout: month or week. |
item_list_id | empty | Analytics list ID. Empty uses booking_products. |
item_list_name | empty | Analytics list name. Empty uses the translated "Activities" label. |
[sessiq_flow product_tag="birthday"]
[sessiq_flow site_ids="site-a,site-b" item_list_id="lessons"]
[sessiq_product]
| Attribute | Default | Description |
|---|---|---|
id | — | Required. The product. |
show_name | true | Show the product name. |
show_price | true | Show the price. |
show_description | true | Show the description. |
button_text | "Book Now" | Button label (translated). |
use_modal | false | Open the booking flow in a pop-up window. |
class | empty | Extra CSS classes on the container. |
bare | false | Drop the card background, border, shadow and padding, leaving just the button. Useful for inline "Book" buttons. |
Also accepts the style attributes.
[sessiq_products]
| Attribute | Default | Description |
|---|---|---|
site_id | empty | Only show products of this site. |
limit | 12 | Maximum number of products. |
columns | 3 | Number of columns. |
order_by | empty | name or price. Empty keeps the API order. |
show_name | true | Show product names. |
show_price | true | Show prices. |
show_description | true | Show descriptions. |
button_text | "Book Now" | Button label (translated). |
use_modal | false | Open the booking flow in a pop-up window. |
class | empty | Extra CSS classes on the container. |
bare | false | Drop the default card chrome. |
Also accepts the style attributes.
[sessiq_calendar]
| Attribute | Default | Description |
|---|---|---|
product_id | — | Required. The product. |
months | 2 | Months of availability to load. |
show_prices | true | Show prices on times. |
min_party_size | 1 | Smallest party size. |
max_party_size | 20 | Largest party size. |
default_view | month | First layout: month or week. |
Picking a time sends the customer to the Booking Page URL from the settings.
[sessiq_courses]
| Attribute | Default | Description |
|---|---|---|
site_id | empty | Only show courses of this site. |
columns | 3 | Number of columns. |
order_by | empty | date, name or price. Empty uses the widget default (date). |
show_steps | true | Show the step progress bar. |
success_url | empty | Return URL after a redirect payment. |
cancel_url | empty | Return URL if a redirect payment is cancelled. |
class | empty | Extra CSS classes on the container. |
bare | false | Drop the default card chrome. |
Also accepts the style attributes.
[sessiq_course_product]
| Attribute | Default | Description |
|---|---|---|
id | — | Required. The course product. |
site_id | empty | Only show terms at this site. |
show_steps | true | Show the step progress bar. |
success_url | empty | Return URL after a redirect payment. |
cancel_url | empty | Return URL if a redirect payment is cancelled. |
class | empty | Extra CSS classes on the container. |
bare | false | Drop the default card chrome. |
Also accepts the style attributes.
[sessiq_course]
| Attribute | Default | Description |
|---|---|---|
id | — | Required. The course. |
show_steps | true | Show the step progress bar. |
compact | false | Compact layout. |
success_url | empty | Return URL after a redirect payment. |
cancel_url | empty | Return URL if a redirect payment is cancelled. |
[sessiq_waiver]
| Attribute | Default | Description |
|---|---|---|
booking_id | empty | The booking whose participants sign. |
product_id | empty | The product whose waiver is used when there is no booking yet. |
signature_mode | both | typed, drawn or both. Any other value becomes both. |
Give booking_id, product_id or both.
[sessiq_campaign]
| Attribute | Default | Description |
|---|---|---|
slug | empty | The campaign. Empty shows the single active campaign. |
return_url | empty | Return URL for prepaid offers paid by redirect. Empty means this page. |
Style attributes
[sessiq_product], [sessiq_products], [sessiq_courses] and [sessiq_course_product] accept style attributes. Each one sets a CSS variable on that one container, so it overrides the page-wide colours for that embed only. See Theming.
Values may contain letters, digits, spaces and # , . % ( ) _ -. Other characters are removed.
| Attribute | CSS variable |
|---|---|
button_color | --sessiq-button |
button_text_color | --sessiq-button-text |
button_hover_color | --sessiq-button-hover |
button_hover_text_color | --sessiq-button-hover-text |
button_shadow | --sessiq-button-shadow |
button_hover_shadow | --sessiq-button-hover-shadow |
button_radius | --sessiq-button-radius |
button_padding | --sessiq-button-padding |
button_border | --sessiq-button-border |
button_font_size | --sessiq-button-font-size |
button_weight | --sessiq-button-weight |
button_letter_spacing | --sessiq-button-letter-spacing |
button_uppercase | --sessiq-button-transform: uppercase when true (default false) |
primary_color | --sessiq-primary |
text_color | --sessiq-text |
muted_color | --sessiq-text-muted |
background_color | --sessiq-background |
border_color | --sessiq-border |
radius | --sessiq-radius |
[sessiq_product id="your-product-id" bare="true" button_color="#ff2d95" button_radius="999px" button_uppercase="true"]
Gutenberg blocks
In the block editor, search for "Sessiq". The blocks produce the same placeholders as the shortcodes. Style attributes, class and bare are shortcode-only.
| Block | Settings (default) | Same as |
|---|---|---|
| Sessiq Booking Widget | Product ID, Show steps (on), Compact mode (off), Default view (month) | [sessiq_widget] |
| Sessiq Product Card | Product ID, Show price (on), Show description (on), Button text ("Book Now"), Use modal (off) | [sessiq_product] |
| Sessiq Product List | Site ID, Columns (3), Limit (12), Order by (API order), Show price (on), Show description (on), Use modal (off) | [sessiq_products] |
| Sessiq Calendar | Product ID, Months (2), Show prices (on), Min party size (1), Max party size (20), Default view (month) | [sessiq_calendar] |
| Sessiq Course List | Site ID, Columns (3), Order by (date), Show steps (on) | [sessiq_courses] |
| Sessiq Course Product | Product ID, Site ID, Show steps (on) | [sessiq_course_product] |
| Sessiq Course Enrollment | Course ID, Show steps (on), Compact mode (off) | [sessiq_course] |
| Sessiq Waiver | Product ID, Booking ID (signature mode is always both) | [sessiq_waiver] |
There is no block for the location-first flow or the campaign calendar. Use the [sessiq_flow] and [sessiq_campaign] shortcodes in a Shortcode block.
Deprecated options
[sessiq_widget] accepts legacy_widget="true", which adds data-legacy-widget="true" to the container. It runs the old single-product widget from before version 1.1.52 instead of the booking flow. It is a one-release fallback and will be removed in the next release. Do not use it on new pages, and remove it from existing ones once the booking flow works for you.