This article explains how to test booking widget v3 style customizations.
To customize your widget, you must be on the Standard or Custom plan.
Customizations are applied by us (i.e. Booxi). If you are interested in customizing your widget, contact your Booxi representative.
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.