Website widget

The Website widget publishing option can be added to any page on your website, allowing your Customers to schedule without leaving your website. It can also be used as part of your lead generation strategy. This scheduling method creates an effective call to action, motivating your leads and prospects to schedule with you while browsing your website. 

The website widget is a multi-channel engagement tool that also supports the submission of email inquiries and allows you to prominently display your contact phone number. The widget text and design can be customized and the scheduling lightbox is fully brandless.

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

When should I use a Website widget?

This publishing option is available to all website visitors and therefore is best used when implementing the BOLD marketing strategy.


To embed a scheduling pane on your website, you must be a webmaster for your company's website, or have direct access to your company website’s code.

Adding a Website widget to your website

  1. Select the Website widget tab (Figure 1).
  2. Go to Booking pages in the bar on the left → Booking page → Share & Publish.Figure 1: Share icon in top navigation menu
  3. In the Widget header step, enter a title for your widget and select a color for the header.
  4. In the Widget layout step, select which elements will be included in your widget. Then, use the drop-down 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. 
    • Booking button: Adds a button to your widget. When the Customer clicks the button, it opens your Booking page or Master page in a themed lightbox (overlay pop-up).
    • Email inquiry: Allows your prospects and Customers to submit a quick inquiry note. When the Customer submits the inquiry, they will receive a confirmation email and you will be sent the note.
    • Phone number: Displays your organization's phone numbers, allowing prospects and Customers to  get in touch.Figure 3: Website widget as it appears on your website or web page
  5. In the Widget content step, select a tab to edit the content for each element in your widget (Figure 3). 
    • Booking: Edit the button text and the text surrounding the button. Then, select the Booking page or Master page for your widget.
    • E-Mail: Edit the button text and the text surrounding the button. Then, add a post submission message that the Customer will see after submitting their note. 
    • Phone: Edit your phone number.Figure 4: Widget content step
  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 copy the code to your clipboard.
  8. Paste the code into your website in the correct location.


If you change any Website widget settings, you must replace the Website button code you added to your web pages.

However, you can always edit the Booking page settings, Master page settings, and the theme design without updating the code on your web pages.

The code can be placed anywhere in the page code, preferably just before the closing </body> tag. It can be added to any page, 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.

If you have some basic understanding of CSS, you can apply further customization (widget design and lightbox height) on top of the core settings.

The Website widget is responsive and automatically adjusts to desktop and mobile devices. OnceHub 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.
  • 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.

Learn more about customization

Restrictions for the Website widget

  • The widget and lightbox are HTML 5 apps and are not supported on old browsers, including Microsoft Internet Explorer Learn more about our System requirements
  • The widget code contains JavaScript, which might be blocked by some low-cost web hosting providers. In this case, you will not be able to embed ScheduleOnce in this website.
Was this article helpful?
Thank you for your feedback!