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.
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
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: reservationresource
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.