Book Now through Javascript only

It is possible to operate Book Now with javascript only, this can be helpful for a website where using the generated book now buttons do not address the specific needs.

The following form was created to illustrate a situation where using book now with javascript would make sense. The use would use this form to make a selection as well as apply a custom option.

Additionally this example makes use of the onClosed setting which is used to define a callback function to be called on closing book now. Give it a try and view the code example below.

Configuration

Initializing Book Now is no different than usual, you will see the onClosed property is defined. The value is a function we'll see below.

<script> booxiController.configure({ apiKey:'178271z23G8u7889d938FW1e80C3007p', onClosed:cbBookComplete, language: 'eng' }); </script>

Launching Book Now with custom data

The form button calls a function which evaluate the form and then makes use of booxiController.open to launch book now with custom settings. Please refer to Example 3 for specific info on using booxiController.open.

<script> function customBook() { /* Form evaluation logic here * var service = 12051; * var option = Custom option : ' + 'Option 1'; * */ booxiController.open(null, { serviceId: service, staffId: 2298, customRequest: option}); } </script>

Form logic aside the process of launching Book Now with specific parameters is pretty straight forward. You will notice that the first parameter of booxiController.open is null, normally the expected parameter is a string id text of a booking profile. By specifying the value as null the default book now configuration is used.

The second parameter is an object containing the properties you wish to apply to book now. Supported properties are : language, serviceCategoryId , serviceId, staffId, customRequest.

Unsupported properties will be ignored along with invalid property values. The value for customRequest must be a string, this value will be appended to the appointment custom request.

The onClosed Callback

Below is an example of the callback, the function will be called with an object argument. This object will contain information that will allow you to determine if the booking process was successfully completed. You may find a full description of the callback object here.

<script> function cbBookComplete(bookingData) { if(bookingData.bookingSuccessful !== true) { /* Booking not completed*/ if(bookingData.bookingStatus == 'Booking Canceled') console.log('The user canceled the booking process.'); else console.log('A critical error caused book now to close.'); } else { /* Booking Successfully Complete */ console.log(bookingData.bookingType + ' booking Successful, id : ' + bookingData.bookingId); } } </script>

As you can see from the above example the primary value to look for is bookingSuccessful which is only true if the booking has been completed successfully.

Complete bookingData object
(Note that properties may or may not be presented in the object, depends on data availability at the moment of the close event)

{
    bookingStatus: 'Booking Success',
    bookingSuccessful: true,
    bookingType: 'appointment',
    bookingId: 123456,
    staffId: 123456,
    serviceId: 123456,
    eventCalId: 123456,
    serviceName: 'Hot Pho',
    staffFirstname: 'John',
    staffLastname: 'Doe',
    datetime: '2018-12-18T18:59:16.209Z',
    attendeeCount: 4,
    serviceCategoryName: 'Soups',
    serviceDuration: 60,
    serviceCurrencyCode: 'USD',
    servicePrice: '$10.00 + ($3.00 / person)',
    totalPrice: '22.00',
    totalPay: : '5.00',
    clientData: {
        address: '1234 Hot Soup str',
        city: 'Montreal',
        country: 'CA',
        pczip: 'A1AB2B',
        provState: 'QC',
        customRequest: 'Extra spicy please',
        email: 'pho@hotsoup.com',
        firstname: 'Jayne',
        lastname: 'Doe',
        phone: '+15141111111',
        phoneCC: 'CA'
    }
}