Website widget customization

The ScheduleOnce Website widget publishing options 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 widget and the lightbox that opens the Booking page or Master page. The design and layout of both elements,  the multi-channel widget and the scheduling lightbox, can be customized to ensure it fits perfectly on your website. Widget settings can be customized on the Share & Publish page, before you copy the code.

In this article, you'll learn about customizing the Website widget. 

Requirements

To embed and customize a Website widget on your website, you must be a webmaster for your company's website, or have direct access to your company website’s code.

Customization steps

  1. Click Share & Publish in the top navigation bar. 
  2. Select the Website widget tab (Figure 1).
    Figure 1: Website widget tab
  3. In the Widget header step, you can edit the Widget title and select the Widget color
  4. In the Widget layout step,  select which elements will be included in your widget. Then, use the dropdown menus to customize the order in which each element will appear on the widget. In the Try me! pane, you'll see a preview of your widget.
  5. In the Widget content step, edit the content for each element in your widget. Use the tabs to toggle between elements. 
  6. In the Widget code step, select which side of the screen you want to add the Widget to. 
    • Left widget button: Adds the widget to the bottom left corner of any website or web page.
    • Right widget button: Adds the widget to the bottom right corner of any website or web page.
  7. Click the Copy button to the copy the code to your clipboard.
  8. Paste the code into the relevant location on your website. 

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.

After you've pasted the code, you can follow the steps below to customize the button design and lightbox layout.

Customizing the widget design and text

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 also can 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 the 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 -->

Customizing the lightbox layout

When your Customer clicks the scheduling button in the widget, your Booking page or Master page opens in a lightbox. This allows your Customers to schedule without leaving your website.

 The lightbox is brandless and the design of the scheduling process itself is determined by the Theme applied in the Overview section of the Booking page or Master page you selected in the Select a Booking page step.

ScheduleOnce handles 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

  • For most cases, the default height is the recommended option.
  • Modify the lightbox height if the content of the steps in your scheduling process is consistently shorter or longer than the default height.
  • Remove the lightbox height attribute completely if you want your Customers to scroll using the external browser scroll bar, rather than the internal lightbox scroll bar.

 Customizing the widget button action

When your Customer clicks the scheduling button in the widget, 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!