External Book Now - v2

This page contains a brief introduction and examples of the new external booking api.

Operational Tests :

• Default Booking Now
• Popup Book Now
• Legacy Book Now
• Deployment version

Code Generator app : Generator

• Basic Usage Examples
• Configuring Book Now
• Advanced Usage Examples
• Book Now through Javascript only
• Book Now for a Group Event
• Book Now - Pushing Client Data
• Book Now - Booking flow
• Book Now - Service Filter Tags
• Book Now - Custom Ui - Classic Style vs Default Style
• Book Now - Custom Ui - Font Family
• Book Now - Custom Ui - Color
• Book Now - Custom Ui - Loading Animation

Brief Overview

Installation

The installation process for v2 has been slimmed down to reduce the level of complexity. The user need only add the following script into the web page header :

<script src="https://www.booxi.com/api/booknow.js"></script>

Basic Usage

The simplest possible usage can be summed up in the following example.

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

On page load the javascript code will generate a button, provided there is an HTML Element containing the id provided in the buttonTargetId setting.

By default the booxi widget is configured as english and loading as an iFrame

For a hands on introduction take a look at the Basic Usage Examples page.

Configuration & Settings

During the initial configuration it is possible to define a couple of settings which are applied globally on all button instances. Here is a quick example :

<script> var bnHandler = booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p', language: 'nld', buttonText: 'Reserve Today', showIcon: false }); </script>

The above will set the default language to Dutch, remove the icon from the book button and have a custom text.

Configuration & Global Behavior

During the configuration we can also define settings which effect the global behavior of the plugin.

<script> var bnHandler = booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p', gaCode: 'UA-46433723-1', usePopup: true }); </script>

The above settings will apply to every single button. In this case book now will open as an external popup, and within book now the google analytics key will be instanced for basic analytic feedback.

Creating Custom Booking Buttons

The configure method will return an object which serves as your interface with the JS API. Through this object we are able to create more buttons as well as customize some their behavior.

<script> var bnHandler = booxiController.configure(...); /* Creates button for english book now, with custom text */ bnHandler.createBookingButton('div_bnt_1', {language:'eng', buttonText:'Book'}); /* Creates button for french book now, with custom text */ bnHandler.createBookingButton('div_bnt_2', {language:'fre', buttonText:'Reserver'}); /* Creates button for a different booxi business */ bnHandler.createBookingButton('div_bnt_3', {apiKey:'178271z23G8u7889d938FW1e80C3007p'}); </script>

Additionally the button creation methods enable the defining the pre-selection of certain elements when opening book now

<script> var bnHandler = booxiController.configure(...); /* Opens book now with a specific service category */ bnHandler.createBookingButton('div_bnt_1', {buttonText:'See Massages', serviceCategoryId: 4215}); /* Opens book now with a specific service selected*/ bnHandler.createBookingButton('div_bnt_2', {buttonText:'Deluxe Hair Coloration', serviceId: 6532}); /* Opens book now with a specific staff selected (starts with staff)*/ bnHandler.createBookingButton('div_bnt_3', {buttonText:'Reserve time with Bob', staffId: 321}); /* Opens book now with a specific service and staff selected*/ bnHandler.createBookingButton('div_bnt_3', {buttonText:'Haircut with Bob', staffId: 321, serviceId: 5663}); </script>

Defining Booking Profiles

It is also possible to define a booking profile without creating a button. The profile can be called via onclick methods or used to create a button at a later time

<script> var bnHandler = booxiController.configure(...); /* This creates a profile which can be access with the id label : book_profile_1*/ bnHandler.addingBookingProfile('book_profile_1', {language:'eng', buttonText:'Book'}); /* You can create buttons by providing a profile ID*/ bnHandler.generateButtonByProfile('div_bnt_1', 'book_profile_1'); bnHandler.generateButtonByProfile('div_bnt_2', 'book_profile_1'); </script> <!-- You can also apply the profile label in an onClick attribute --> <div class="fancy_btn" onclick="booxiController.open('book_profile_1')"> Click Here to Book</div>