Time slot display [Classic]

The time settings available in the Time slot display section allow you to model a wide range of meeting scenarios. In this article, you’ll learn how to set the duration of bookings and how to control when time slots are offered to Customers.

<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>

Location of the Time slot display section

You can find the Time slot display under Time slot settings. The location of the Time slot settings depends on whether or not your Booking page has any Event types associated with it. Learn more about the location of the Time slot setting section

• For Booking pages associated with Event types (recommended), go to Booking pages in the bar on the left → select the relevant Event type → Time slot settings.
• For Booking pages not associated with Event types, go to Booking pages in the bar on the left → select the relevant Booking page → Time slot settings.

Time slot duration

You can set a fixed time slot duration or you can allow the Customer to select a duration within a range set by you.

If you want to allow Customers to select the meeting duration, simply define the selection range and set the default value that you want to use.

Figure 1: Time slot duration

Important

Variable duration (when the Customer chooses the meeting duration) is not available when your Event type is associated with a Booking page.

Starting times

You can control the time at which time slots can start. For example, on the hour (0), on the half hour (30), or any other time in 5 minute increments.

Figure 2: Starting times

Time slot spacing

You can use the drop-down to set the minimum gap between time slot starting times. For example, time slot starting times must be at least 15 minutes/ 45 minutes/ 2 hours apart.

Figure 3: Time slot spacing