To add Booxi's Book Now widget into your website, follow these steps:
PART 1: Generate the code for your widget
If you are unsure which version of the booking widget you are currently using, see below:
The booking widget v2 looks like this:
The booking widget v3 looks like this:
Alternatively, you may refer to the Booxi script in the head tag of your code
Booking widget v2:
<script src="https://www.booxi.com/api/booknow.js" async=""></script>
Booking widget v3:
<script src="https://www.booxi.com/booknow/booknow.js" async=""></script>
Booking widget v2
Access our code generator
If your hosting region is North America, click here.
If your hosting region is Europe, click here.
In the code generator, input the API key associated with your store (to find your API key, go to "My Business" > Business Details > "API key")
Enter any additional fields and/or configure settings as you see fit [optional]
Test your button by clicking "Run"
Familiarize yourself with the different components of the code, as shown here. You will need this in part 2.
Booking widget v3
Access our code generator
If your hosting region is North America, click here.
If your hosting region is Europe, click here.
In the code generator, input the API key associated with your store (to find your API key, go to "My Business" > Business Details > "API key")
Enter any additional fields and/or configure settings as you see fit [optional]
Generate your code by clicking "Generate"
Test your button
PART 2: Insert the code into your website
Navigate to your website creation tool. If you are using any of the below tools, click the link:
In the code generator, copy the code from the head tag and paste it within the head tag of your page.
In the code generator, copy the code from the body tag and paste it at the beginning of your page's body tag.
*Note: if you are using the booking widget v3, this may be blank.
In the code generator, copy the button code and paste it in the area you want it to appear.
Test the functioning of the button in your website tool.
Here's a video demonstrating the above steps:
You can make basic customization changes; familiarity with Javascript and CSS is required. For advanced customization, contact your Booxi representative.