Website embed customization

This article explains how to customize one of our publishing options - the Website embed. The Website embed can be placed on any of your web pages, as a call-to-action for your Customers to schedule with you. The design and layout of the embedded scheduling pane can be customized to ensure it fits perfectly on your website. Many embed settings can be customized from the Share & Publish page, before you copy the code. For more advanced customization, you can modify properties directly in the code. You can also collect booking data from an embedded Booking page in order to create a custom confirmation page, enable client-side integrations, or enrich Customer data profiles, among other client-side API use cases.

Customization steps

  1. Sign in to your ScheduleOnce account, and make sure that you have webmaster access to your website.
  2. Go to the Share & Publish page, define the settings and copy the code.
  3. Customize the code as explained in detail below (optional).
  4. Test the customized embed code to verify it meets your requirements.
  5. Paste the code into the desired location on your website and publish the Website embed.

This article describes customizing the size of the Website embed. The design of the scheduling process itself is determined by the Theme applied on the Overview section of the embedded Booking page or Master page.

Embed height

ScheduleOnce is the only scheduling platform that can handle the embed height in one of two ways:

  • Fixed height: This is the default option and height is set to 550 pixels. You can change the default height to any number you wish by changing the height property in the code. When the content is longer, a vertical scroll bar will be added automatically. When the element containing the embed on your website has a height setting, we highly recommend setting the ScheduleOnce height attribute to the same number of pixels.
  • Responsive height: This will automatically adjust the height to the frame content. To use this method you must delete the height property in the code. In this case the height will adapt to the content of each step in the scheduling process.

<!-- ScheduleOnce embed START --> 

<div id="SOIDIV_BookingPageLink" data-so-page="BookingPageLink" data-height="550" data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;" data-psz="00"></div> 

<script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script> 

<!-- ScheduleOnce embed END -->

Embed height recommendations 

Keep the default height for general use.
Modify the height if the content of the steps in your scheduling process is consistently shorter or longer than the default height specified, or to match the height set for the element containing the embed.
Remove the height attribute completely if you wish your Customers to scroll using the external browser scroll bar, rather than the internal embed scroll bar.

Embed width

The embedded frame width is responsive in the 290 - 900 pixels range. It automatically adjusts for desktop and mobile devices. Because the embed is fully responsive, it will adjust to the maximum width of its wrapping container element (up to 900 pixels wide).

To ensure the embed remains responsive, we recommend that you do not change the width of the code. If you wish to limit the responsiveness of the embed, we recommend wrapping the embed with another element on your page. This can be done by adding a wrapping container around the code:

<div style="width: 50%">

<!-- ScheduleOnce embed START -->

<div id="SOIDIV_BookingPageLink" data-so-page="BookingPageLink" data-height="550" data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;" data-psz="00"></div>

<script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script>

<!-- ScheduleOnce embed END -->

</div>

Was this article helpful?
Thank you for your feedback!