Basic Usage Examples

Best practice for reliable initialization.

In order to maximize your usage of this api there are a couple steps that can be taken. Please take a look at the example below.

<script> var bnHandler = null; window.bxApiInit = function() { booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p', buttonTargetId: 'my_book_button' }); }; </script>

To ensure that booxiController is ready to be configured, booknow.js will attempt to call a global the global function bxApiInit on page ready (only if the function is defined). By creating function with the name of bxApiInit to contain booxi initialization script you will ensure proper initialization every time.

The configure method will return an interface object, if you plan to use it be sure to declare the variable outside the scope of bxApiInit function. In the above example you can see bnHandler declared in the global scope and later used in the initialization function.

Basic Usage - Example 1

The following example is one of the simpler ways to add a Book Now button to a web page

<script> window.bxApiInit = function() { booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p', buttonTargetId: 'my_book_button' }); }; </script> <div id="my_book_button"></div>

By using the buttonTargetId property you can let booknow.js create the button for you. The only requirement is that on your web page has an element with the id attribute set to the same value as the buttonTargetId property. The element with the id will be used as a container for the created book now button.

This creation process will apply the default settings that have be set on calling configure. By default booknow.js is set to English with the button label Book Now, it will open as an iFrame. Like this :

Basic Usage - Example 2

Alternately if you already have a button on your web page, you may open Book Now by a simple Javascript function call. As shown is the example below :

<script> window.bxApiInit = function() { booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p' }); }; </script> <div class="btn_style1" onclick="booxiController.book();">Reserve Today</div>

By using the onclick attribute on your existing button element, you will be able to call some Javascript code that will open book now. Specifically this following Javascript function call : booxiController.book();

This will open Book Now with the default configuration settings applied. The following button is an example of this usage.

Basic Usage - Example 3

The following example will show you a more hands on way to create a BooK Now button. This method can used for to create multiple buttons, for example different buttons for service in multiple languages.

<script> var bnHandler = null; window.bxApiInit = function() { bnHandler = booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p' }); bnHandler.createBookingButton('book_btn_en', {language:'eng'}); bnHandler.createBookingButton('book_btn_fr', {language:'fre'}); bnHandler.createBookingButton('book_btn_es', {language:'spa'}); }; </script>

As shown in the above example, we can use the createBookingButton method to create as many Book Now buttons as we like. The first argument will be the element id, similar to buttonTargetId from Example 1. The second argument is an object containing the custom properties you would like to apply, see Button Config Parameters for full list of properties.

For this example we only made use of the language setting which will apply localized label to the button as well as set the language of teh book now experience. As shown in following example buttons :