The Booking Widget (v3) can be preconfigured and opened upon loading a webpage. This functionality can be useful to prompt the widget for a specific store, a set or subset of services or a specific event.

To do so, a list of arguments must be passed along with the URL at which the Booking Widget will be loaded.

Script

Before proceeding further, make sure the below script is included on your webpage and loaded synchronously. The script’s URL depends on your hosting region, “www.booxi.com” for North America and “www.booxi.eu” for Europe.

North America

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

Europe

<head>
   <script src="https://www.booxi.eu/booknow/booknow.js" sync=""></script>
</head>

Loading the Widget With a List of Arguments

To automatically load the widget with a set of arguments, the below steps must be followed:

Extract the arguments passed along with the URL.
Format arguments into a list of parameters recognizable by the widget.
Open the booking widget using your API key and the list of parameters.

Extracting Arguments from URL

Within the <body> of your webpage use <script> tags to embed the following code. Arguments will be extracted from the query string and stored in an array.

Then, parse each of the arguments and construct a Javascript Object (JSON) that will be passed to the booking widget. The parsing will vary depending on how you named your arguments and what parameters you want to pass.

Now, open the Booking Widget by calling the method BookNow.open() using your API key and JSON.

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>

   // Extracting arguments from the URL
   var urlArgs=[];
   var s=location.toString().split('?');
   s=s[1].split('&');
   for(i=0;i<s.length;i++) {
        u=s[i].split('=');
        urlArgs[u[0]]=u[1];
   }
    
   // Build a list of parameters from the arguments
   var param = {};
   Object.assign(param,

      // Check if all stores should be listed
      (urlArgs['allstore'] == 'true') ? { bookingFlow:'locations' } : null,

      // Check for locations tags
      (urlArgs['locationTags'] != '') ? { locationTags:urlArgs['locationTags'] } : null
   );

   // Opening the Book Now widget with provided parameters
   BookNow.open(apiKey:'YOUR_API_KEY',param);

</script>
</body>

How to Format URL Arguments

A list of arguments should be constructed as a query string starting with the character "?" and each argument separated with the appropriate separator "&". The below examples showcase how query strings are formatted.

<!--example with a single user-defined argument "book" used to open the booking widget as soon as the page is loaded -->

wwww.yoursite.com/landingpage?book=now

<!--example with a second user-defined argument "flow" assigned with the value "locations". This argument will be used to open the booking widget with the parameter bookingFlow:'locations' -->

www.yoursite.com/landingpage?book=now&flow=locations

Here’s a list of parameters the booking widget can be configured with. URL arguments can be used to assign values to these parameters.

Widget Parameters

Name	Description
apiKey	Your API key.
bookingFlow	Determine the first step in the booking process. When setting the booking flow to “locations”, clients will be asked to select a store location before proceeding further with their booking. Possible values are: locations
locationTags	Filter stores by location using user-defined tags.
serviceTags	Filter services using user-defined tags.
serviceCategoryId	Preselect a service category when opening the booking widget. To find a service category ID, go to the "Services" tab > {select a service category}, then notice the ID under the "Category details" banner.
serviceId	Preselect a service. To find a service's ID, go to the "Services" tab > {select a service}, then notice the ID under the "Service details" banner.
staffId	Automatically set staff ID when a service is selected. When used, a serviceId must be provided. To find a staff ID, go to the "Personnel" tab > {select a staff member}, then notice the ID under the "Personnel details" banner.

Use Cases

One Merchant

To open the booking widget for a specific merchant or store, use its unique API key as shown below.

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>

   BookNow.open(apiKey:'YOUR_API_KEY');

</script>
</body>

All Merchants

To open the booking widget with all stores within the same merchant group id, assign the parameter “bookingFlow” with the value “locations”.

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>

   var param = {};
   Object.assign(param,
      (urlArgs['allstore'] == 'true') ? { bookingFlow:'locations' } : null
   );

   BookNow.open(apiKey:'YOUR_API_KEY',param);

</script>
</body>

Automatically Opening the Booking Widget

The following example showcases how you can determine if the Booking Widget should be opened automatically using a simple user-defined argument.

Example of URL

www.yoursite.com/landingpage?book=now

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>
   // Extracting arguments from the URL
   var urlArgs=[];
   var s=location.toString().split('?');
   s=s[1].split('&');
   for(i=0;i<s.length;i++) {
        u=s[i].split('=');
        urlArgs[u[0]]=u[1];
   }

   // Opening the Book Now widget if "book = now"
   if(urlArgs['book'] == 'now') {
      BookNow.open(apiKey:'YOUR_API_KEY');
   }

</script>
</body>

Choice of Stores Assigned with a Specific Tag (locationTags)

The example below shows how to open the Booking Widget with a list of store locations assigned with the location tag “downtown”.

Example of URL

wwww.yoursite.com/landingpage?flow=locations&stores=downtown

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>
   // Extracting arguments from the URL
   var urlArgs=[];
   var s=location.toString().split('?');
   s=s[1].split('&');
   for(i=0;i<s.length;i++) {
        u=s[i].split('=');
        urlArgs[u[0]]=u[1];
   }
    
   // Parse for the API key, booking flow and location tags
   var param = {};
   Object.assign(param,
      (urlArgs['allstore'] == 'true') ? { bookingFlow:'locations' } : null,
      (urlArgs['locationTags'] != '') ? { locationTags:urlArgs['locationTags'] } : null
   );

   // Opening the Book Now widget with provided parameters
   BookNow.open(apiKey:'YOUR_API_KEY',param);

</script>
</body>

Preselect a Service and a Staff Member (serviceId & staffId)

This example shows how to open the booking widget with a specific service and a selected staff. Note that when preselecting a staff, a serviceId MUST be provided; otherwise, the booking widget will open with its default settings.

Example of URL

www.yoursite.com/landingpage?service=12345&staff=123456

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>
   // Extracting arguments from the URL
   var urlArgs=[];
   var s=location.toString().split('?');
   s=s[1].split('&');
   for(i=0;i<s.length;i++) {
        u=s[i].split('=');
        urlArgs[u[0]]=u[1];
   }
    
   // Parse for the API key, serviceId and staffId
   var param = {};
   Object.assign(param,
      (urlArgs['service'] != '') ? { serviceId:urlArgs['service'] } : null,
      (urlArgs['staff'] != '') ? { staffId:urlArgs['staff'] } : null
   );

   // Opening the Book Now widget with provided parameters
   BookNow.open(apiKey:'YOUR_API_KEY',param);

</script>
</body>

Services Assigned with a Specific Tag (serviceTags)

This example shows how to open the Booking Widget and list only services assigned with the tag “vip”.

Example of URL

www.yoursite.com/landingpage?serviceTags=vip

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>
   // Extracting arguments from the URL
   var urlArgs=[];
   var s=location.toString().split('?');
   s=s[1].split('&');
   for(i=0;i<s.length;i++) {
        u=s[i].split('=');
        urlArgs[u[0]]=u[1];
   }
    
   // Parse for service tags
   var param = {};
   Object.assign(param,
      (urlArgs['serviceTags'] != '') ? { serviceTags:urlArgs['serviceTags'] } : null
   );

   // Opening the Book Now widget with provided parameters
   BookNow.open(apiKey:'YOUR_API_KEY',param);

</script>
</body>

Specific Service Category (serviceCategoryId)

This example shows how to open the Booking Widget with a preselected service category.

Example of URL

www.yoursite.com/landingpage?category=14082

Code

<body>
<script>(function BooxiSetupHandler(){});})();BooxiSetupHandler()</script>
<script>
   // Extracting arguments from the URL
   var urlArgs=[];
   var s=location.toString().split('?');
   s=s[1].split('&');
   for(i=0;i<s.length;i++) {
        u=s[i].split('=');
        urlArgs[u[0]]=u[1];
   }
    
   // Parse for the API key and service category
   var param = {};
   Object.assign(param,
      (urlArgs['category'] != '') ? { serviceCategoryId:urlArgs['category'] } : null
   );

   // Opening the Book Now widget with provided parameters
   BookNow.open(apiKey:'YOUR_API_KEY',param);

</script>
</body>

Add Booxi's Booking Widget to your Lightspeed eCommerce (C-series) website

Booking Widget Implementation Guide (v2)

How to create and configure landing pages using URL arguments (BNv2)

Google Tag Manager

How to use Location and Service Tags