Web Forms - Adding Booking Engine to your form - Help - Distribution and Booking Engine by NC Squared

The final step in adding Booking Engine to your website is to update the page hosting the form to use the Booking Engine javascript library (BookingLibrary). This requires some minor additions to the code on the page where you host your form.

Step 1 - Get your booking URL

In order to show the correct hosts and booking configurartion, the BookingLibrary needs the appropriate Booking URL - the identifying part of a shared availability rule link.

A full shared availability rule URL looks like this:

https://booking.nc-squared.com/s/book/example-org-path/30-min-demo?cs=%2BlLXRGOQ

The Booking URL is everything after /s/book/ - the org path, the rule slug and the security checksum:

example-org-path/30-min-demo?cs=%2BlLXRGOQ

You will pass this value to the library as the bookingUrl option in the next step.

Step 2 - Add the Booking Engine components to your webpage head

Adding the library to your page

To add the library, add the stylesheet and script below to the <head> of your page:

<link rel="stylesheet" type="text/css" href="https://booking.nc-squared.com/css/n2-bookinglibrary.css"/>
          <script defer src="https://booking.nc-squared.com/js/n2-bookinglibrary.js"></script>

Step 3 - Creating the Booking Library javascript

Passing in your form values and calling the BookingLibrary

Next, we need to create the javascript that will call Booking Engine. We need to ensure that we populate the Booking URL from Step 1, and match all of the form values to the field IDs from the form connector

Make sure the form_values exactly match the form field IDs as specified in your form connector.

The template for the javascript is below:

new n2.BookingLibrary({ bookingUrl: '<YOUR_BOOKING_URL>' }).show({
            meetingData: {
              form_values: {
          //Populate this array with fields available on the form with values matching the field IDs from the form connector
               '<FORM_FIELD_1>': '<VALUE_1>',
               '<FORM_FIELD_2>': '<VALUE_2>',
               '<FORM_FIELD_3>': '<VALUE_3>',
              }
            },
            onSaved: (event) => {
              //Optional callback to do something with the booked event data in the webpage e.g. show a confirmation alert
            }
          });

Here's a populated example

new n2.BookingLibrary({ bookingUrl: 'example-org-path/30-min-demo?cs=%2BlLXRGOQ' }).show({
            meetingData: {
              form_values: {
          //Populate this array with fields available on the form with values matching the field IDs from the form connector
               'name': 'name',
               'email': 'email',
               'industry': 'industry',
               'annual_revenue': 'revenue',
              }
            },
            onSaved: (event) => {
              //Optional callback to do something with the booked event data in the webpage e.g. show a confirmation alert
            }
          });

Step 4 - Link the BookingLibrary to your form submission

You should call the BookingLibrary at the point of form submission from your page. For example, if your form Submit button has an id of submit-button, you would insert the above at this point:

document.getElementById('submit-button').addEventListener('click', (e) => { 
              //insert the above code here
          });

By default Booking Engine will create records in Salesforce in order to ensure the booking details are correctly captured. If your existing form creates a Salesforce record, ensure that duplicates are not being created.