Website button customization

This article explains how to customize one of our publishing options - the Website button. The Website button can be placed on any of your web pages, as a call-to-action for your Customers to schedule with you. The code provided by ScheduleOnce creates two elements on your page: the button and the lightbox that shows the scheduling pane. The design and layout of each element, the call-to-action button and the scheduling lightbox, can be customized. Many button settings can be customized on the Share & Publish page, before you copy the code. For more customization, you can add CSS properties to the code.

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):
    • Customize the location of the button on the page.
    • Customize the design of the button.
    • Customize the text on the button.
    • Customize the scheduling lightbox.
  4. Test the customized button code to verify it meets your requirements.
  5. Paste the code into your website and publish the Website button.

Customize button location

Website buttons can either be fixed or floating. Select which type you require from the Share & Publish page.

  • Floating buttons float above your content at the bottom right of you page. Their position is constant even when scrolling down the web page. The floating button code can be placed anywhere in the page code, preferably just before the closing </body> tag. It can be added to any or all of your pages. A handy shortcut to add a scheduling button to all your pages is to place the code of the floating button into the code of the website footer.
  • Fixed buttons are added to the specific location on your web page. Make sure that you paste the code in the desired location for your button on your page.

Customize button design

The design of the button is an important factor in your conversion rate. You can modify, add or remove CSS properties in the code to achieve the most effective design for your website visitors. The text on the button can also be modified for optimal conversion.

<!--ScheduleOnce button START-->

<button id="SOIBTN_BookingPageLink" style="background: #FE9E0C; color: #000000; padding: 10px 20px; border: 1px solid #c8c8c8; font: bold 14px Arial; cursor: pointer;" data-height="580"  data-psz="00" data-so-page="BookingPageLink" data-delay="1">Schedule an Appointment</button>

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

<!-- ScheduleOnce button END -->

The following properties can be modified, among others: background color; padding (the spacing between and the text and the border); border thickness and color; and font family, style and color. The text on the button appears in the code just before the closing </button> tag.


Customize lightbox layout

When using a button, the booking page can either open in a new browser tab or a lightbox. You should choose which option you prefer before copying the code from the Share & Publish page. In either case, the design of the scheduling process itself is determined by the Theme applied on the Overview section of the selected Booking page or Master page.

  • The new browser tab option opens your Booking page or Master page as a full page - similar to opening your Booking page from a link in an email. Note that on mobile devices the scheduling pane will always open in a new page, even if you selected the lightbox option.
  • The Lightbox option opens the Booking page or Master page in a lightbox. This option is instant and brandless, allowing your customers to schedule without ever leaving your website. The lightbox width is a fixed 796 pixels, and cannot be modified. Due to width limitations, on mobile devices the scheduling pane will always open in a new page, even if you selected to open your page in a lightbox. ScheduleOnce is the only scheduling platform that can handle the lightbox height in one of two ways:
    • Fixed height: This is the default option and height is set to 580 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.
    • 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 button START-->

<button id="SOIBTN_BookingPageLink" style="background: #FE9E0C; border: 1px solid #C8C8C8; padding: 10px 20px; font: Arial bold 14px #000000;" data-height="580"  data-psz="00" data-so-page="BookingPageLink" data-delay="1">Schedule an Appointment</button>

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

<!-- ScheduleOnce button END -->

 

Lightbox height recommendations

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

Was this article helpful?
Thank you for your feedback!