Using Booking page tags in Master pages [Classic]

Tags are specific keywords added to your Booking pages. Tags enable customers to filter Booking pages by keywords and find the person with whom they need to book in a fast and efficient manner.

Tags can be used on their own in a Master page that lists Booking pages only, or they can be used together with Event types and categories, adding an additional filtering dimension.

<script id="snippet-prepend">
$(function(){

  /*disable in widget*/
  if($('.w-documentation-article').length === 0){

     var ToC =
  "&lt;nav role='navigation' class='table-of-contents toc-top'><h4>In this article:" + "<ul>";
     var el,     title, link, header;
      //Define the heading levels you want to use in ascending order. Can add extra or remove unneeded.
     $(".hg-article-body h1, .hg-article-body h2, .hg-article-body h3, .hg-article-body h4").each(function() &#123;
              el = $(this);
              title = el.text();
                 if(title != '')&#123;
                anchorTitle = el.text().replace(/([~!@#$%^&*()_+=`&#123;&#125;\[\]\|\\:;'&lt;>,.\/\? ])+/g, '-').toLowerCase();
                link = "#" + anchorTitle;
                //Set all headers to a 0-nesting level.
                header = 'header-nesting-0';
                //Adjust header-nesting layers so that they point to the correct html tag. header-nesting-1 should match the second .hg-article-body h# listed above; header-nesting-2 should match the third, etc.
                if($(this).is('h2'))&#123;
                    header = 'header-nesting-1';
                &#125;else if($(this).is('h3'))&#123;
                    header = 'header-nesting-2'
                &#125;
                el.html('<a id="'+anchorTitle+'" class="toc-anchor">' + el.html());
                newLine =
      "<li class='"+header+"'>" +
        "<a class='article-anchor' href='" + link + "'>" +
          title +
        "" +
      "";


                ToC += newLine;
              &#125;
              &#125;);
     ToC +=
   "" +
  "";
    $("#snippet-prepend").before(ToC);
  &#125;
&#125;);

&lt;/script>

<style>
/* CSS to style the TOC as it displays and the auto-created anchors
.toc-top styles the box for the TOC; adjust styles here to tweak look and feel */

.toc-top {
  background-color: #FAFAFA; /* set to #fff or delete entirely for no background */
  border: 1px solid #C8C8C8; /* adjust the color hex here to change border color */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
  margin-top: 24px;
  margin-bottom: 36px;
  min-height: 20px;
  padding: 13px 20px;
  max-width: 75%;
}
.toc-top h4 {
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 8px;
  font-weight: 400;
}
.toc-top ul {
  padding: 0 0 0 15px !important;
  margin-bottom: 0;
}
.toc-top > ul {
  margin-bottom: 13px!important;
}
.toc-anchor {
  display: block;
  height: 90px;
  margin-top: -90px;
  visibility: hidden;
}

/* Set the indentation for the nesting levels. May need to be edited to match changes above. Increase or decrease the margin-left to get your desired level of indentation. */
.header-nesting-1 {
    margin-left: 14px;
}
.header-nesting-1:before {
  background-image: url(https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d31bcc88e121c9b25ba22c4/n/bulletv2.svg)!important;
}
.header-nesting-2 {
    margin-left: 28px;
}
.header-nesting-2:before {
  background-image: url(https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d31be536e121cf22b0cc6ae/n/bulletv3.svg)!important;
}
</style>

Using Booking pages with tags only

The simplest scenario when using tags is to add the tags to individual Booking pages and group them under a Master page. In this scenario, tags are the only way to filter Booking pages.

For example, you can group multiple Booking pages into a Master page and use tags to enable Customers to filter by role.

See a live example of a scheduling scenario that uses tags

Using Booking pages with categories and tags

Booking page categories and tags can complement each other. Categories provide a way to create a hierarchical tree structure, while tags provide non-hierarchical keyword filtering capability.

For example, you have several Team members who need to accept Customer appointments in a show. Each Team member is assigned different tags according to their areas of expertise. When all the Team members are grouped under one Master page, Customers are able to use tags to filter the Team member list and see only the Team members who match their tag selection.

See a live example of a scheduling scenario that uses categories and tags

Using Booking pages with Event types and tags

Booking page tags can add an additional filtering dimension to Booking pages that have already been filtered by Event type. For example, Event types allow the Customer to select a duration for room reservation and once a time is selected, available rooms can be filtered by room property.

See a live example of a scheduling scenario that uses tags after selecting a service, date, and time

Tag behavior on the Customer interface

1. Tags are listed in the order that the Booking pages are listed on the Master page. If a Booking page has multiple tags, they are listed in the order that they were added.
2. By default, “All” is selected and all Booking pages are displayed.
3. The Customer selects one or more tags from the list, which filters the Booking pages accordingly.
4. Finally, the Customer selects a Booking page from the filtered results and makes a booking.

NoteCustomers can view and filter by tags on the Master page if you have checked at least one tag for a specific Booking page. You should ensure that all Booking pages included on the Master page have tags, so your Booking pages can offer your Customers a fully functional tag filtering experience.