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.
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 changed:
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 the Booking Widget v2, no longer exists in the 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:
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>