Website widget customization

This article explains how to customize one of our publishing options - the Website widget. The Website widget can be placed on any of your web pages, as a call-to-action for your Customers to engage with you. The code provided by ScheduleOnce creates two elements on your page: the widget and the lightbox that opens the Booking page. The design and layout of both elements, the multi-channel widget and the scheduling lightbox, can be customized independently. Many widget settings can be customized on the Share & Publish page, before you copy 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 design and text of each part in the widget.
    • Customize the scheduling lightbox.
    • Customize the widget button action.
  4. Test the customized widget code to verify it meets your requirements.
  5. Paste the code into your website and publish the Website widget.

Customize widget design and text

The collapsed widget floats above the content at the bottom right or bottom left of you page. The 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 the widget to all your pages is to place the widget code into the code of the website footer.

The design and text of the widget are important factors in your conversion rate. Many of these settings can be configured on the Share & Publish page in your ScheduleOnce account, before you copy the code. You can also modify the following properties in the code to achieve the most effective design for your website visitors:

  • The widget title and the main call-to-action when the widget is collapsed.
  • The scheduling button and its title.
  • The phone number and its title.
  • The email form and its title.
  • The thank you note after sending the email.
  • Lightbox height - see next section.

<!--ScheduleOnce widget START-->

<div id="SOIWGT_BookingPageLink" data-so-page="BookingPageLink" data-wgt-style= "ttl:Free 1-on-1 Consultation; bg:#333333; clr:#ffffff; align:right;" data-height="580" data-tmp="17.40" data-pos="132" data-btn-style="ttl:Schedule Online; txt:Book Your Session Now; bg:#FE9E0C; clr:#000000;" data-phn-style="ttl:Call Us; phn1:+1-800-555-0199;" data-eml-style="ttl:Email Us; txt:Send; bg:#FE9E0C; clr:#000000" data-email="OnceHub Mailer(john@example.com)" data-message="Thank you for your message.&lt;br /&gt;We will get back to you as soon as we can." data-delay="1"></div>

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

<!-- ScheduleOnce widget END -->

Customize lightbox layout

When the scheduling button in the widget is clicked, your Booking page or Master page opens in a lightbox. The lightbox is instant and brandless, allowing your customers to schedule without leaving your website. 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.

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.

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

 Customize widget button action

When the scheduling button in the widget is clicked, your Booking page or Master page opens in a lightbox by default. You can also configure the button to open a new webpage, instead of showing a lightbox. For example, the widget button could open a scheduling page on your website that includes a ScheduleOnce embed.

To configure this behavior, add the "data_target" attribute to your widget code. Add the code as the last attribute in the opening <div> tag. The value of the attribute should use the full URL of the webpage that you would like to display when the widget button is pressed. See the code example below: 

<!--ScheduleOnce widget START-->

<div id="SOIWGT_BookingPageLink" data-so-page="BookingPageLink" data-wgt-style= "ttl:Free 1-on-1 Consultation; bg:#333333; clr:#ffffff; align:right;" data-height="580" data-tmp="17.40" data-pos="132" data-btn-style="ttl:Schedule Online; txt:Book Your Session Now; bg:#FE9E0C; clr:#000000;" data-phn-style="ttl:Call Us; phn1:+1-800-555-0199;" data-eml-style="ttl:Email Us; txt:Send; bg:#FE9E0C; clr:#000000" data-email="OnceHub Mailer(john@example.com)" data-message="Thank you for your message.&lt;br /&gt;We will get back to you as soon as we can." data-delay="1" data-target = “http://www.example.com/page_with_embed.html"></div>

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

<!-- ScheduleOnce widget END -->

Was this article helpful?
Thank you for your feedback!