The purpose of this article is to showcase what has changed in Booking Widget v3, what to pay attention to when migrating from Booking Widget v2 and how to update your implementation.
Implementation
The implementation of a “booking” button has been greatly simplified in Booking Widget v3. The following section presents how the implementation differs between Booking Widget v2 and Booking Widget v3.
Header
Within the <head> tag of your webpage, make sure to update the Booxi library as shown below.
Book Now v2
<head>
<script src="https://www.booxi.com/api/booknow.js" async=""></script>
</head>
Book Now v3
<head>
<script src="https://www.booxi.com/booknow/booknow.js" async=""></script>
</head>
Remember to set the appropriate URL set to your hosting region: www.booxi.com for North America and www.booxi.eu for Europe.
Booking Widget v3 supports Google Analytics 4. Please consult the following document for more information about their implementation.
Body
Within the <body> tag of your webpage, update the code according to the below details. Take note that booxiController is no longer used with Booking Widget v3.
Booking Widget v2
<body>
<script>
var bnHandler = null;
window.bxApiInit = function ()
{
bnHandler= booxiController.configure({apiKey: "YOUR_API_KEY_HERE"});
};
</script>
<button onclick="booxiController.book();">Book Now</button>
</body>
With Booking Widget v3, properties can be set upon calling BookNow.open() directly instead of through a configuration method.
Booking Widget v3
<body>
<button onclick="BookNow.open({apiKey:'YOUR_API_KEY_HERE'})">Book Now</button>
</body>
Changes in Properties
The following properties have been altered between Booking Widget v2 and Booking Widget v3. Please make sure to update in accordance with the following details.
Object clientData → client
In BNv3, the object clientData and sub-property customRequest have been renamed to client and additionalRequest respectively. Make sure references to these properties are updated.
|
Book Now v2 |
Book Now v3 |
|
clientData |
client |
|
clientData.customRequest |
client.additionalRequest |
Property customRequest
The property customRequest (not to be confused with clientData.customRequest), used to push additional data in Booking Widget v2, no longer exists in Booking Widget v3. It might be integrated into Booking Widget v3 at a later stage.
Changes in Functionalities
Callbacks and Redirections
The following callbacks and their implementations have been changed between Booking Widget v2 and Booking Widget v3.
|
Booking Widget v2 |
Booking Widget v3 |
|
redirectUriBooked |
onBookedRedirectTo |
|
redirectUriClosed |
onAbortRedirectTo |
Implementation in Booking Widget v2
Booking Widget v2
<!-- Assigning redirect URL for successful and aborted booking -->
window.bxApiInit = function () {
bnHandler = booxiController.configure({
apiKey: "YOUR_API_KEY_HERE",
redirectUriBooked: "https://www.booxi.com/redirect/booked.html",
redirectUriClosed: "https://www.booxi.com/redirect/aborted.html"
});
Implementation in Booking Widget v3
Booking Widget v3
<!-- Assigning redirect URL for successful and aborted booking -->
<body>
<button onclick="BookNow.open({apiKey:'YOUR_API_KEY_HERE',
onBookedRedirectTo:'https://booxi.com/thankyou.html',
onAbortRedirectTo:'https://booxi.com/home.html'})">
Book Now
</button>
</body>