Implementation
The following section highlights the differences between BNv2 and BNv3.
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 based on your hosting region: www.booxi.com for North America and www.booxi.eu for Europe.
Booking Widget v3 supports Google Analytics 4; see here for more info.
Body
Within the <body> tag of your webpage, update the code according to the below details. 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 |
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 may be implemented in the future.
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>