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:

CODE

<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):

HTML

<!-- 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
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
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
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
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.