Skip to main content

How to test widget customizations (BNv3)

How to test the Booking Widget’s customizable properties using the Google Chrome debugger.

Updated over 2 months ago

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.

image6-2

Properties & Elements

To find the customizable properties in the debugger, follow these steps:

  1. Click on the “Elements” tab.

  2. Expand the tree, locate and select the element assigned with class="booknow_root__3SB57".

  3. Click on the “Styles” tab, all CSS properties will be listed in the below window.

image4-3

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.

image5-3

Changing Fonts

To set a different font, follow these steps:

  1. Click on Settings and then select Experiments.

    image1-3
  2. Type in “font” in the textbox and enable the Font Editor Tool.

    image7-2

  3. Click on the Font icon.

  4. Click on Font Family and select a new one from the dropdown list.

    image2-3

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.

Did this answer your question?