All Collections
Integration
Book Now Widget
How to Create Your Own “Book Now” Button
How to Create Your Own “Book Now” Button

Learn how to create your own "Book Now" button.

Updated over a week ago

For more flexibility and control over the integration of the booking widget, we highly recommend creating your own “Book Now” button.

From the default integration (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

Did this answer your question?