*Note: The booking widget v2 will no longer receive technical support or bug fixes after June 29, 2026. For this reason, Booxi strongly recommends you to update your implementation to the booking widget v3.
To make the switch, follow these 2 steps:
Update the BookNow library in the <head> tag of your webpage
Update the code in the <body> tag of your webpage
To obtain the necessary code, you may use the code generator.
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.
To obtain your API key, go to the "My Business" tab > Business details > API key.
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 the 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>