Website button: Business scenarios [Classic]

The OnceHub Website button publishing option can be added to any page on your website, allowing your Customers to schedule without leaving your website. This scheduling method creates an effective call to action, motivating your leads and prospects to schedule with you. The button text and design can be customized and the scheduling lightbox is fully brandless.

The Website button can also be integrated with your lead generation process, letting you offer scheduling to every website visitor. If you want to offer scheduling to specific prospects, such as your top prospects, you can use the Website button in conjunction with our Web form integration feature.

In this article, you’ll learn about different business scenarios for the Website button publishing option.

<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 the Website button to engage any website visitor

You can embed a Website button in any website page. When the Customer clicks the the button, they will be taken directly to your Booking page or Master page. The Website button acts as a call-to-action that allows any website visitor to schedule with you without ever leaving your website.

Learn more about the Website button

Using the Website button with Web form integration

You can use a Website button with Web form integration to offer scheduling to leads right after they submit a lead generation form.

You have the option to offer scheduling only to your top leads, based on their web form submission, or to every prospect who fills out your web form. Prospects that have already provided their details in your web form will not have to do so again in the Booking form. Customer data is passed from your web form directly to OnceHub.

There are two options for passing data to OnceHub when you integrate scheduling with your web form:

Passing data via URL parameters**[

](/integrating-your-web-form-with-scheduleonce-using-url-parameters/ “Integrating your Web form with ScheduleOnce using URL parameters”)**

When you pass data via URL parameters, web form data is passed to OnceHub via the URL. You can choose to prepopulate or skip the Booking form.

If you are using a third-party web form, such as Wufoo, the Booking form data you pass via the URL needs to match the supported OnceHub URL parameters. This will ensure the right information is extracted from the URL and placed in the correct Booking form fields.

Passed data via CRM record IDs

When you pass data via CRM record IDs, the CRM record ID is passed to OnceHub via the URL. You can choose to prepopulate or skip the Booking form.

• If you are using Infusionsoft, you can use the Infusionsoft Contact ID to integrate with Infusionsoft Web forms or personalize the booking process on landing pages.
• If you are using Salesforce, you can use the Salesforce Record ID to personalize the booking process on landing pages.

NoteThe button is a HTML 5 app and is not supported on old browsers, including Microsoft Internet Explorer.

Learn more about our System requirements