Creating a password-protected Booking page [Classic]

If you don’t want your OnceHub Booking page to be available to the general public, you can put a form in front of your Booking page to act as a “gatekeeper”. When your Customers access the Booking page, they will be prompted to provide a password before the form is displayed.

Some third-party forms and custom forms can require a password. To protect your Booking page with a password, ensure that you’re using web form integration and that your lead generation form provides this functionality.

In this article, you’ll learn about creating a password-protected Booking page.

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

Why would I need to create a password-protected Booking page?

You may offer appointments to a specific company and don’t want non-employees to be able to schedule. By protecting your Booking page with a password, you can selectively provide the password only to those Customers who should be allowed to access it.

Password protection also acts as an additional layer of security.

Creating a password-protected Booking page

In this example, your Wufoo form will act as the “gatekeeper” to your Booking page.

1. Integrate OnceHub with your Wufoo form using URL parameters
2. In Wufoo, create a new form or edit an existing form. Ensure that your Wufoo form includes the Customer name and Email fields.
3. Use Wufoo’s templating feature to pass the field content to OnceHub.
4. In the Wufoo Form Manager, hover over your form and click the Set password button (Figure 1).Figure 1: Wufoo Form Manager
5. Enter a password for the page and save the changes.

Your Wufoo form is now configured to ask Customers for a password before the form can be displayed.

You should use one of the Wufoo sharing options to invite your Customers to schedule. Make sure to provide your Customers with the password.

Your Customers will be able to enter the password, fill out the form, and make a booking without having to fill out the OnceHub Booking form.

Important

Don’t share the OnceHub Booking page directly with your Customers as this will bypass the additional logic from the Wufoo form step.