For more flexibility and control over the implementation of the booking widget, we highly recommend creating your own “Book Now” button.
From the default implementation (see code below), create your own button by mapping the “booxiController.book()” method to the “onclick” event of a simple HTML button.
<!-- Booxi Script -->
<head>
<script src="https://www.booxi.com/api/booknow.js" async=""></script>
</head>
<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>
Change its appearance by assigning a class defined in your website’s CSS. If your website doesn’t use CSS, create a new <style> element within the <head> tag of the page where the “Book Now” button will be displayed. Within that <style> element, define a class “.button” and set its properties such as color, border, font, etc. per your preference. For a full list of properties, please consult the following page.
<head>
<style>
.button
{
background-color: #4CAF50;
border: none;
border-radius: 8px;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Gill Sans", sans-serif;
margin: 4px 2px;
}
</style>
</head>
Then, assign this newly created class to your button by adding class="button" as shown below.
<button class="button" onclick="booxiController.book();">Book Now</button> |
Default Booxi Button | Custom Button | Default HTML Button |