Customizing your Custom Schedule Widget skin

When creating or modifying a Custom Schedule Widget, you can also customize the structure and design of your Custom Schedule Widget  This article describes all the settings you can configure on the structure, design and embed code page for your Custom Schedule Widget skin.

In this article:

    Custom Schedule Widget Structure page

    Widget NameThe name of the Custom Schedule Widget.
    ColumnsThe schedule-related custom fields that appear on your Custom Schedule Widget.
    Schedule View ControlsDisplays your custom schedule in list, day, week, or month view. You can add a calendar button, a today button, set a default view, and choose whether to display canceled classes in your custom schedule.
    Schedule DisplayChooses how you want your custom schedule to be displayed by setting the following options to ON or OFF:

    • View days independently under a new header
    • Display days with no scheduled services
    • Go to the date with the next available service

    Under WEEK START DAY, you have the option to choose Current Day or any day in the week to be the starting day of your week.

    FiltersChooses whether to display the following filters in your Custom Schedule Widget. For example, Location, Class/Event Type, Staff, Days, or Class Times.
    LIVE PREVIEWDisplays a live preview of the Custom Schedule Widget, including any unsaved changes.

    Custom Schedule Widget Design page

    LIVE PREVIEWDisplays 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 PREVIEWDisplays 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.
    FONT STYLEAllows 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.
    BACKGROUNDAllows you to change the background color of the element.
    PADDINGAllows you to adjust the vertical and horizontal spacing between elements.
    GRADIENTAllows you to add a gradient to the color of the element.
    BORDERAllows you to change border color, add rounded corners, and change line thickness around the element.
    LINK COLORSAllows you to change the text color before and after hovering over the hyperlink.
    BUTTON TEXTAllows you to customize the text of the button.
    BUTTON WIDTHAllows you to adjust the width of the button.

    Custom Schedule Widget Embed Code page

    Select A LocationAllows you to select the location in which the widget applies. This option is only available when you have multiple locations in your business.
    Widget CodeThe 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 PageThe direct URL of the page where you want to place this widget.
    Custom CSSThe 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.


    Was this article helpful?
    (102 out of 103 people found this article helpful )

    What can we do better?

    Thank you!