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:
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>
The UUID of your page (required)
The slug of your business (required)
Set the widget language
The ID of the reservation to show (used for cancellation)
The ID of the resource to preselect
If specified, skip the contact details step and link the reservation to this contact ID
If specified, skip the contact details step and link the reservation to this lead ID
Space-separated string containing the properties that should automatically retrieved from the current URL. Currently supported:
autoList (script only)
AttributeTokenList (see below)
An object representing the auto property with add/remove/toggle/contains methods.
Properties of events can be found in the
detail property of the
CustomEvent. These events bubble up the tree.
Fired when a reservation is created. Properties contains the properties of the reservation.
Fired at specific steps of the flow. Default behavior is to add the event to
Dynamic boolean property to check whether the widget is shown
Call to open the widget
Call to close the widget
Call to toggle open/close
Fired when the widget is opened
Fired when the widget is closed
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.
Accepts any number of parameters. Each parameter is treated as a String token to be added to the attribute.
Accepts any number of parameters. Each parameter is treated as a String token to be removed from the attribute.
contains(token: string): boolean
Returns whether or not token is part of the token list.
toggle(token: string): boolean
toggle(token: string, force: boolean): boolean
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.
The amount of tokens in the list.
item(index: number): string
Returns the token at the specified index.