Skip to main content

How to customize your widgets

Use CSS/SASS to customize your widgets

You can customize the look, feel and function of your booking process with CSS & SASS. It is possible to adjust your widget's colours and fonts via CSS/SASS.

If you want to add a booking engine to your website, learn how to embed an experience booking engine widget.

Please note that doing this can break your booking process.
Please test your changes thoroughly.

Widget customization resources

How to add customization to your widget

1. Navigate to the top bar and click on Widgets > Booking channels and then click the booking channel's widgets you'd like to edit, from the list.

2. Click Theme under the Widgets section in the left-hand side menu. Make sure the Show advanced options box is checked.

Custom CSS/SASS is used to overwrite and add CSS selectors and change their properties.

Use your browser' inspect element feature to find the class names of the elements you want to overwrite

Note: Do not use the scrambled class names, on the format sc-abCDe cbdEFg as they are automatically generated and will change from time to time.

3. Enter your custom CSS/SASS in the box below and click Continue. The changes should now be reflected in your widgets.