Implementation Guide (v3)
      Back to home
      1. Knowledge Base
      2. Booking Widget
      3. Implementation Guide (v3)

      How to Test Widget Customizations

      This document will guide you through the process of testing the Booking Widget’s customizable properties using the Google Chrome debugger.

      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.

      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.