Skip to main content
All CollectionsWebsite Widgets
Customize your Custom Schedule Widget skin

Customize your Custom Schedule Widget skin

Updated over a week ago

You can tailor the look, layout, and design of your new Custom Schedule Widget by customizing its “skin to match your business needs. The new version is marked with a green indicator 🟢. You can also customize the legacy version of the widget, marked with an orange indicator 🟠.

Access your Custom Schedule Widget

To access your new Custom Schedule Widgets, click the App Drawer then click Setup > Website Widgets > 🟢 Custom Schedule.

Next, either click Add Skin to create a new skin, or click the Action button > Edit on one of your existing skins.

Key tips before you begin

  • The Live Preview window shows you what your changes will look like when they’re live. Click the device buttons to see how it’ll look on desktop, tablet, or mobile devices, or click Full screen preview.

  • Click the Reset to default button in the bottom right to start from scratch.

  • You can enable Google and Facebook analytics tracking from the Client Portal settings.

Create or modify a Custom Schedule Widget skin

To create or modify a Custom Schedule Widget skin, follow these steps:

  1. Click the App Drawer button then click Setup > Website Widgets > 🟢 Custom Schedule.

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

Customize widget skin settings

To customize your widget skin settings, follow these steps:

General settings

  1. Under Service Information, set the service information that will be displayed in the widget.

    • Show available spots – Set to ON to display the number of spots remaining.

    • Show room: – Set to ON to display the room where the service takes place.

    • Show special instructions: – Set to ON to display any special instructions for the service.

  2. Under Schedule Display, configure all schedule and location-related settings to display.

    • Display services for selected locations – Use the drop-down menu to select which of your locations to show services for.

    • Display quick filters for service types – Set to ON to allow clients to filter the widget by service type.

    • Display dates with no scheduled services – Set to ON to show days without scheduled services in the widget’s week view.

    • Jump to date with next available service – Set to ON to auto-load the next date with services, helping clients find upcoming sessions faster.

    • Display canceled sessions – Set to ON to display canceled sessions.

    • Set the starting day for week schedule view – Select the first day to show when the widget is set to week view.

    • Default view mode – Choose to display the schedule by Day, Week, or Month by default.

  3. Default Filters pre-filter the schedule based on the selected options, so clients see what’s most relevant to them first, though clients will still be able to see all filters.

    Filters include:

    • Class type

    • Event type

    • Instructor

    • Virtual or in person

    • Days of the week

    • Time of day

Styling settings

Under Styling, you can configure how your fonts, backgrounds, borders, and buttons will appear on your widget skin. Use the Live Preview window to take a look at how your changes will appear.

Finally, when all of your widget skin settings are configured the way you want, click Save.

Embed your widget

After saving your widget skin, you can embed it on your website in just a few steps.

  1. Click Embed Code in the top right to get your widget code.

  2. Click Copy to clipboard to copy the code.

  3. Then, embed the widget code into your website.

Did this answer your question?