Website embed: Business scenarios [Classic]

You can use the Website embed publishing option to embed the OnceHub scheduling pane into any page on your website. This allows your Customers to schedule without leaving your website.

The Website embed 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 Website embed in conjunction with our web form integration feature.

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

&lt;script id="snippet-prepend">
$(function()&#123;

  /*disable in widget*/
  if($('.w-documentation-article').length === 0)&#123;

     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>

&lt;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 &#123;
  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%;
&#125;
.toc-top h4 &#123;
  font-size: 18px;
  line-height: 26px;
  margin: 0 0 8px;
  font-weight: 400;
&#125;
.toc-top ul &#123;
  padding: 0 0 0 15px !important;
  margin-bottom: 0;
&#125;
.toc-top > ul &#123;
  margin-bottom: 13px!important;
&#125;
.toc-anchor &#123;
  display: block;
  height: 90px;
  margin-top: -90px;
  visibility: hidden;
&#125;

/* 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 &#123;
    margin-left: 14px;
&#125;
.header-nesting-1:before &#123;
  background-image: url(https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d31bcc88e121c9b25ba22c4/n/bulletv2.svg)!important;
&#125;
.header-nesting-2 &#123;
    margin-left: 28px;
&#125;
.header-nesting-2:before &#123;
  background-image: url(https://dyzz9obi78pm5.cloudfront.net/app/image/id/5d31be536e121cf22b0cc6ae/n/bulletv3.svg)!important;
&#125;
&lt;/style>

Using Website embed to engage any website visitor

You can embed your Booking page or Master page into any website page. The embedded scheduling pane 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 embed

Using Website embed to collect booking data

You can collect booking confirmation data from an embedded Booking page by adding a JavaScript function alongside the OnceHub embed code in your website. This feature can be used in business scenarios such as creating a custom confirmation page, enabling client-side integrations, or enriching Customer data profiles.

Learn more about collecting data from embedded Booking pages

Using Website embed with Web form integration

You can use Website embed 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

When you pass data via URL parameters, web form data is passed to the OnceHub Website embed 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 makes sure that the right information is extracted from the URL and placed in the correct Booking form fields.

Passing 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 in order to provide a quicker booking experience.

If you’re 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’re using Salesforce, you can use the Salesforce Record ID to personalize the booking process on landing pages.

NoteThe embedded interface is an HTML 5 app and is not supported on old browsers, including Microsoft Internet Explorer.

Learn more about our System requirements