Widget Web Component

To facilitate a deeper integration with your website, we provide a the widget as a web component. This allows you to customize the widget experience even further.

To get start, include the widget library:

<script src="https://widget.booker25.com/js/widget25.js"></script>

Then use either the full-fledged button (like the generated script), or the bare widget (comparable to the iframe):

<!-- This displays a button at the bottom of your page --> <booker-button page="uuid-of-your-page" business="your-business-slug"></booker-button> <!-- This behaves much like the iframe --> <booker-widget page="uuid-of-your-page" business="your-business-slug"></booker-widget>

Common properties

Name

Type

Description

Name

Type

Description

page

String

The UUID of your page (required)

business

String

The slug of your business (required)

lang

String

Set the widget language

reservation

String

The ID of the reservation to show (used for cancellation)

resource

String

The ID of the resource to preselect

contact

String

If specified, skip the contact details step and link the reservation to this contact ID

lead

String

If specified, skip the contact details step and link the reservation to this lead ID

auto

String

Space-separated string containing the properties that should automatically retrieved from the current URL. Currently supported: reservation resource

reservation: Automatically load reservation id from URL parameter named b25reservation

resource: Automatically load resource id from URL parameter named b25resource

autoList (script only)

AttributeTokenList (see below)

An object representing the auto property with add/remove/toggle/contains methods.

Common events

Properties of events can be found in the detail property of the CustomEvent. These events bubble up the tree.

Event

Properties

Description

Event

Properties

Description

reservation

id: String
properties: Object

Fired when a reservation is created. Properties contains the properties of the reservation.

datalayer

event: String
data: Object

Fired at specific steps of the flow. Default behavior is to add the event to window.dataLayer if it exists. Call preventDefault() on the event object to prevent this.

Button only

Name

Type

Description

Name

Type

Description

isOpen

property

Dynamic boolean property to check whether the widget is shown

open()

method

Call to open the widget

close()

method

Call to close the widget

toggle()

method

Call to toggle open/close

open

event

Fired when the widget is opened

close

event

Fired when the widget is closed

AttributeTokenList

This object mimics the behaviour of DOMTokenList, as we cannot instantiate that directly. This object is a view of the attribute of an element and thus does not have any state of its own. When adding or removing tokens, extra whitespace can be stripped and duplicates can be removed.

Name

Type

Description

Name

Type

Description

add(…tokens: string[])

method

Accepts any number of parameters. Each parameter is treated as a String token to be added to the attribute.

remove(…tokens: string[])

method

Accepts any number of parameters. Each parameter is treated as a String token to be removed from the attribute.

contains(token: string): boolean

method

Returns whether or not token is part of the token list.

toggle(token: string): boolean

toggle(token: string, force: boolean): boolean

method

Add or removes the token to the list, depending on the current state or the force parameter. Returns whether the token is in the list after the call.

length: number

property

The amount of tokens in the list.

item(index: number): string

method

Returns the token at the specified index.

Â