You can tailor the look, layout, and design of your Appointment Widget by customizing its "skin" to match your business needs.
For example, if your spa offers both massage and facial services but you want a dedicated booking widget for massages only on your massage services page, you can create a skin that shows only massage services.
Key tips
You need the Edit widgets permission to create or modify Appointment Widget skins.
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 Reset to Default in the bottom right to start from scratch.
If you try to leave the editor without saving, a Confirmation Required popup appears. Click Leave this page to discard your changes, or click Stay on this page to keep editing.
Create or modify an Appointment Widget skin
To create or modify an Appointment Widget skin:
Open the App Drawer then click View All > Setup > Website Widgets > Appointment.
On the Appointment 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
General settings
Under Service Information, set the service information that will be displayed in the widget.
Show service price – Set to ON to display the price of each service.
Show service duration – Set to ON to display the service's duration.
Show service image – Set to ON to display the service's image. This setting has no effect on mobile, which doesn't display service images.
Under Services Display, configure which locations, services, and staff appear in the widget.
Display services for the selected locations – Select the checkboxes for the locations you want to show services for.
Select services – Choose which services to include in the widget. Services are grouped by category. Select Select all to include everything, select a category's checkbox to include all services in that category, or expand a category to select individual services. Use the search field to find a specific service by name.
If you don't select any services, the widget shows every category and service by default.
When you select a whole category, appointment types added to it later appear in the widget automatically.
Appointment types that aren't available for online booking never appear in the widget, even if their category is selected.
A selected category with no bookable appointment types is hidden from clients, and reappears once it has one.
Display services for the selected staff – Select the checkboxes for the staff members you want to show.
Under Title and Description Customization:
Title – Enter the heading shown above the service list.
Description – Enter the text shown below the title.
Styling settings
Under Styling, you can configure how your fonts, colors, borders, and buttons will appear on your widget skin. Use the Live Preview window to see how your changes will appear.
Available options include:
Background color
Font text color
Primary color
Secondary color
Accent font color
Font family
Under Titles, you can set:
Title color
Title font family
Under Borders and separators, you can set:
Color
Line thickness
Button corner radius
Filters corner radius
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.
Click Embed Code in the top right to get your widget code.
Click Copy to clipboard to copy the code.
Embed the widget code into your website.
If you previously embedded an Appointment Widget on your website, it will continue to work automatically. You don't need to replace your existing embed code.