This article is updated to our latest release, which is being rolled out to all Users gradually.
If you see a Schedule button in the top navigation menu, you are viewing the updated version of OnceHub. Otherwise, you can expect to see this in the near future. Please contact us with any questions.
The ScheduleOnce 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
- Go to the Schedule button in the top navigation menu and select Publish on your website.
- Select the Website widget tab (Figure 1).
- In the Widget header step, enter a title for your widget and select a color for the header.
- 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.
- 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.
- 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.
- Click the Copy button to copy the code to your clipboard.
- 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. 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.
- 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.
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