If your business offers several services in multiple locations, it might be difficult for your customers to quickly find what they are looking for. To alleviate such an issue, booxi provides a functionality known as tags.
Tags are a powerful tool to filter content displayed in the booking widget. Not only are they a great way to filter content but also to minimize the amount of data your customers have to go through to complete their booking. As an example, tags can be used to create buttons dedicated to a subset of services or for stores within a region.
In order to use tags, they must first be defined and assigned in the Back Office. Make sure your tags adhere to the following rules. They ought to be written in a single word without spaces and, if multiple tags are assigned, they must be separated by a comma “ , ”.
To assign tags to a location, do so on its “Business Details” page. To assign tags to a service, do so on its “Service Details” page as shown below.
Tags allow your customers to browse services they are interested in or select a store location closest to their home. Use them to sort out services and locations by your own defined categories.
Before going forward with the implementation, here is a reminder on how to enable and configure your “Book Now” button.
Including the “Book Now” Library
<!-- Remember to select the appropriate URL based on your hosting region -->
<head>
<!-- North America -->
<script src="https://www.booxi.com/api/booknow.js" async=""></script>
<!-- Europe -->
<script src="https://www.booxi.eu/api/booknow.js" async=""></script>
</head>
Configuring the Controller
<script>
var bnHandler = null;
window.bxApiInit = function () {
bnHandler = booxiController.configure(
{
apiKey: "YOUR_API_KEY_HERE" }
);
};
</script>
Mapping the booxiController.book() Function.
<body>
<button onclick="booxiController.book();"> Book Now </button>
</body>
For more information on how to implement a “Book Now” button, consult the following tutorial.
Using Location and Service Tags
The following examples showcase how to format tags as parameters to booxiController.configure().
Remember that the same result can be achieved with the code generator if you do not want to edit code manually. If you opt to use the code generator, make sure to click on “Show Advanced”. Location and service tags are found on the “Create Buttons” tab as shown below.
Single Location Tag
<!-- Filter stores assigned with the tag “downtown” -->
bnHandler = booxiController.configure(
{
apiKey: 'YOUR_API_KEY_HERE',
bookingFlow: 'locations',
locationTags: 'downtown'
}
);
Once the button created by the above code is clicked on, content displayed by the booking widget will be limited to stores assigned with the tag “downtown”.
Single Service Tag
<!-- Filter services assigned with the service tag “vip” -->
bnHandler = booxiController.configure(
{
apiKey: 'YOUR_API_KEY_HERE',
serviceTags: 'vip'
}
);
The booking widget displayed by the above would limit its content to services assigned with the tag “vip”.
Filtering Locations Using serviceTags
<!-- Filter store locations offering at least one service with the tag “vip” -->
bnHandler = booxiController.configure(
{
apiKey: 'YOUR_API_KEY_HERE',
bookingFlow: 'locations',
locationTags: 'service:vip'
}
);
Locations can also be filtered with the use of serviceTags. In the example above, only stores offering at least one “vip” service would be listed in the widget.
Combining Tags using Logical Expressions
Service and Location tags can be combined to create complex filters using logical expressions. To combine tags as an “AND” expression, separate each tag with a comma “ , ”; to combine tags as an “OR” expression, separate each tag with a pipe “ | ”. See below examples for proper formatting and usage. Take note that services will have to match all tags to appear as a result and only service tags support the “OR” expression.
AND : serviceTags: ‘A,B,C‘
The above will result in a match if an entry contains tag A and B and C.
OR : serviceTags: A|B|C
The above will result in a match if an entry contains A or B or C.
AND with OR: serviceTags: A|B , C|D
The above will result in a match if an entry contains A and B or C and D.
Multiple Tags using Logical Expressions
<!-- Filter locations assigned with the tag “downtown” and -->
<!-- offering at least one “vip” or “special” service -->
bnHandler = booxiController.configure(
{
apiKey: 'YOUR_API_KEY_HERE',
bookingFlow: 'locations',
locationTags: 'downtown',
serviceTags: 'vip|special'
}
);
Feel free to further experiment with tags and find the best combinations for your business needs.