This article presents all customizable style properties of the Booking Widget v3, which is ADA compliant. If you apply your own customizations (i.e. not mentioned in this article), compliance with ADA standards is no longer Booxi's responsibility.
Customizations not described in this document are not supported. External tools such as surveys may not be fully supported and some of their features may be limited.
Supported Properties
This section lists all supported properties that can be customized per customer. The list may be expanded in the future as other properties will be made available.
Main Window Frame
List of supported properties to customize the widget’s window frame.
ID | Properties | Description |
1️⃣ | --app-border-radius | Controls the roundness of the main window, when not displayed full-screen. Can be set to a pixel value (greater values = more roundness) or 0 for square corners. |
2️⃣ | --app-margin | Pixel value that controls the minimum spacing around the main window, when not displayed full-screen. |
3️⃣ | --app-shadow | Controls the drop shadow behind the main window. Specified as a [CSS box-shadow]. |
4️⃣ | --backdrop-color | Controls the background outside the main window. Specified as a [CSS color value]. Supports alpha. |
Depiction
Main Window
These properties control the appearance of the widget’s main window.
ID | Properties | Description |
1️⃣ | --background-color | Background color of the main window, not including primary and secondary header areas. |
2️⃣ | --foreground-color-primary-rgba | Color of primary text. Specified as the components of the [CSS rgba() function]. |
3️⃣ | --foreground-color-secondary-rgba | Color of secondary text. Specified as the components of the [CSS rgba() function]. |
4️⃣ | --header-background-color | Background color of the primary (top) header area. Specified as a [CSS color value]. |
5️⃣ | --header-font-text-transform | Transform an element's text to upper or lowercase. This property is applied to the application's main header bar and for the card header title. |
6️⃣ | --header-font-size | The font size to use for the application's main header bar and for the card header title. |
6️⃣ | --header-font-weight | The font weight to use for the application's main header bar and for the card header title. |
6️⃣ | --header-title-letter-spacing | The font letter spacing to use for the application's main header bar and for the card header title. |
6️⃣ | --header-title-line-height | The font line height to use for the application's main header bar and for the card header title. |
7️⃣ | --section-header-background-color | Background color of the secondary header area that displays the title of each section. |
8️⃣ | --separator-color | Color of the separator lines between the headers and panels. Specified as a [CSS color value]. |
9️⃣ | --separator-width | The size of the separator lines, specified in pixels. |
🔟 | --separator-style | Decoration style of the separator lines, specified as a [CSS border-style]. |
Depiction
Font
List of supported properties to customize the widget’s font.
ID | Properties | Description |
1️⃣ | --font-family | The font to use throughout the application. Take note that web safe, web and custom fonts are allowed. Booxi can reference fonts hosted by a third party or customer/brand if required, however Booxi cannot host custom fonts. Custom fonts must be hosted by the brand and corresponding URLs must be provided. If you are expecting to use a proprietary font or font without a free license, please inform your Booxi representative. |
2️⃣ | --font-size | The primary font size. |
| --font-size-mobile | Alternate primary font size to use on mobile devices. |
3️⃣ | --font-size-small | Font size to use for smaller text (e.g. labels, subtitles). |
Depiction
Keyboard Focus
List of supported properties customizable when keyboard focus is activated.
ID | Properties | Description |
1️⃣ | --focus-outline-size | Controls the size of the outline indicating keyboard focus. This property’s value can be set to 0 to hide it, but such a setting will cause the widget to NO LONGER BE ADA COMPLIANT. |
| --focus-color-background | Background color of an element when being focused on. |
| --focus-color-foreground | Foreground color of an element when being focused on. |
Depiction
Lists
List of supported properties to customize how lists are displayed in the widget.
ID | Properties | Description |
1️⃣ | --list-icon-size | The max width/height of images displayed in lists. |
2️⃣ | --list-node-padding | The horizontal and vertical spacing inside each list item. |
3️⃣ | --list-item-title-margin | The amount of space between the title of a list item and any text displayed below it. |
4️⃣ | --list-item-title-font-weight | The font weight of the title of a list item. |
| --time-slot-text-align | Determines the alignment of the time slot text (i.e. time selection screen) |
Depiction
Selections
List of supported properties to customize how selections are displayed in the widget.
ID | Properties | Description |
| --selection-color-rgb | Color of the outline around selected items. Specified as the components of the [CSS rgba() function]. |
1️⃣ | --selection-foreground-color | Color of the outline around a selected item. Inherit from –selection-color-rgb. |
2️⃣ | --selection-background-color | Background color of a selected item. Inherit from –selection-color-rgb. |
3️⃣ | --selection-hover-background-color | Background color of a selected item while the cursor is hovering over it. Inherit from –selection-color-rgb. |
4️⃣ | --selection-outline-size | Size of the outline around a selected item. |
| --selection-hover-font-weight | The font weight of a selected item when hovering over it. |
| --selection-hover-foreground-color | Foreground color of a selected item when hovering over it. |
Depiction
Form Fields
These properties control the appearance of form fields used in the widget.
ID | Properties | Description |
1️⃣ | --error-color-rgb | Color used to indicate an incomplete or invalid entry when filling out a form (e.g. the label and outline of the first name field turns this color if you forget to fill it in). Specified as the components of the [CSS rgb function] |
2️⃣ | --input-border-color-rgb | Color of the border around text entry fields. Specified as the components of the [CSS rgb function] |
3️⃣ | --input-border-radius | Controls the roundness of the border around text entry fields. |
4️⃣ | --input-focus-box-shadow | Controls the shadow/outline of focused text entry fields. |
Depiction
Continue Button
These properties control the appearance of the "continue" button at the bottom of many screens.
ID | Properties | Description |
1️⃣ | --button-border-radius | Controls the roundness of the button. |
2️⃣ | --button-padding | Amount of space between the button's text and its edges. |
3️⃣ | --button-background-color | The color of the button. |
4️⃣ | --button-box-shadow | Enables a shadow effect for the button itself. |
5️⃣ | --button-text-shadow | Enables a shadow effect to the button text. Specified as a [CSS text_shadow]. |
| --button-letter-spacing | Changes the letter spacing of the button text. |
6️⃣ | --button-text-transform | Enables text transformation (e.g. uppercase) of the button text. |
7️⃣ | --button-font-family | Allows customizing the font used by the button. |
8️⃣ | --button-font-weight | Changes whether the button text is displayed in bold. |
9️⃣ | --button-font-size | Allows customizing the font size used by the button. |
Depiction
Survey Inputs
These properties control the appearance of the "continue" button at the bottom of many screens.
ID | Properties | Description |
1️⃣ | --survey-checkbox-radio-outline | Controls the outline displayed around a radio or checkbox buttons in the survey questions. |
2️⃣ | --survey-checkbox-radio-accent-color | The accent color of the radio and checkbox buttons in the survey questions. Not supported in all browsers. |
Depiction
Store Location
The following property controls the appearance of items displayed in the store location list.
ID | Properties | Description |
| --store-location-image-display | Allows hiding of the store location images in the location list. |
CSS Format
This section briefly explains what CSS properties are used by the widget and how to configure them effectively.
app-shadow (specified as a CSS box-shadow)
Syntax
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Format
box-shadow: 16px 16px 8px grey;
backdrop-color (specified as a CSS background-color)
Syntax
background-color: rgb(red, green, blue);
background-color: #RRGGBB;
background-color: hsl(hue, saturation, lightness);
background-color: rgba(red, green, blue, alpha);
background-color: hsla(hue, saturation, lightness, alpha);
Format
background-color: rgb(255, 255, 255);
background-color: #FFFFFF;
background-color: hsl(100%, 100%, 100%);
background-color: rgba(255, 255, 255, 0.5);
background-color: hsla(100%, 100%, 100%, 0.5)
button-text-shadow (specified as a CSS text-shadow)
Syntax
text-shadow: h-shadow v-shadow blur spread color
Format
text-shadow: 2px 2px 5px #FF0000;
separator-style (specified as a CSS border-style)
Syntax
border-style: all
border-style: top right bottom left
Format
border-style: dotted;
border-style: double solid solid double;
Styles
dotted  | dashed  | solid  | double  | groove  |
ridge  | inset  | outset  | none | mix  |