When creating or modifying a legacy Custom Schedule Widget, you can also customize its structure and design. This article describes all the settings you can configure on the Structure, Design and Embed code page for your Custom Schedule Widget skin.
To learn how to customize a Custom Schedule Widget using our new and improved widget editor for custom schedule widgets, see Customize your Custom Schedule Widget skin (New Version).
Note: You can enable Google and Facebook analytics tracking to all website widgets, except the Review Widget and the Staff Widget, from the Client Portal settings.
Create or modify a legacy Custom Schedule Widget skin
To create or modify a legacy Custom Schedule Widget skin, follow these steps:
Click the App Drawer button then click View All > Setup > Website Widgets > 🟠 Custom Schedule.
On the Custom Schedule page, create or modify a skin:
To create a new skin, click +Add skin.
To modify an existing skin, click the skin you want to modify in the list.
Custom Schedule Widget Structure page
Heading | Description |
Widget Name | The name of the Custom Schedule Widget. |
Columns | The schedule-related custom fields that appear on your Custom Schedule Widget. |
Schedule View Controls | Determine whether your custom schedule can be displayed in list, day, week, or month view. You can add a today button, set a default view, and choose whether to display canceled classes in your custom schedule. |
Schedule Display | Choose how you want your custom schedule to be displayed by setting the following options to ON or OFF:
Under Set the start of the week to [day], you have the option to choose Current Day or any day in the week to be the starting day of your week. |
Filters | Choose which filters are available in your Custom Schedule Widget. For example, Location, Class/Event Type, Staff, Days, or Class Times. |
Live Preview | Displays a live preview of the Custom Schedule Widget, including any unsaved changes. |
Custom Schedule Widget Design page
Heading | Description |
Live Preview | Displays a real-time preview of the Custom Schedule Widget, including any unsaved changes. Click any element in this preview to begin editing its design options. |
Live Element Preview | Displays a real-time preview of the widget element you selected for editing. The design options for the selected element are displayed below the Live Element Preview. |
Text Font Style | Allows you to change the font style of the element by changing the font type, color, and size. You can also display the text in bold, italics, or all capitals. |
Background | Allows you to change the background color of the element. |
Padding | Allows you to adjust the vertical and horizontal spacing between elements. |
Gradient | Allows you to add a gradient to the color of the element. |
Border | Allows you to change border color, add rounded corners, and change line thickness around the element. |
Link Colors | Allows you to change the text color before and after hovering over the hyperlink. |
Button Text | Allows you to customize the text of the button. |
Button Width | Allows you to adjust the width of the button. |
Custom Schedule Widget Embed Code page
Heading | Description |
Select A Location | Allows you to select the location in which the widget applies. This option is only available when you have multiple locations in your business. |
Website domains | Enter the domain of the webpage(s) you want to add the widget to. You can add as many webpages as you want, as long as you separate each entry with a comma. If you want to add the widget to multiple places on your website, you can avoid manually entering all URLs by using a “wildcard” by adding an asterisk and a period in front of your main domain name (for example, *.wellnessliving.com). This will cover all subdomains such as “support.wellnessliving.com”. |
Widget Code | The code that is generated after you create a widget. You must copy and paste that code to your website or page to display that widget. |
URL Of Your Page | Enter the direct URL of the page where you want the widget to be placed. This field helps the widget by allowing users to seamlessly return to your webpage after interacting with WellnessLiving. |
Custom CSS | The code that you can use to further customize the style of your widget to match your business’s website and branding. For more information, see Adding custom CSS to a website widget. |