Note
All UI customizations are performed by Booxi and solely on a per request basis. Customizations are limited to the Booking Widget v3.
Preparations
In Google Chrome, open your Booking Widget on a new tab.
Prompt the debugger window by pressing the F12 key.
Properties & Elements
To find the customizable properties in the debugger, follow these steps:
Click on the “Elements” tab.
Expand the tree, locate and select the element assigned with class="booknow_root__3SB57".
Click on the “Styles” tab, all CSS properties will be listed in the below window.
Editing Variables
To edit a variable, click on it and type in a new value. Results will be immediately visible. Do not refresh the page as you will lose your changes.
Changing Fonts
To set a different font, follow these steps:
Click on Settings and then select Experiments.
Type in “font” in the textbox and enable the Font Editor Tool.
Click on the Font icon.
Click on Font Family and select a new one from the dropdown list.
Customizable Variables
Please take note that not all variables can be customized. For a complete list of all customizations, please consult the Widget Customization Guide.