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

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