Booxi Video Conference - UI Customizations

This document presents all customizable options for the Booxi video conference UI.

Default UI

The Booxi video conference feature comes with a default Booxi UI on both web and mobile devices. Most elements can be customized to meet customer’s requirements. Here are screenshots taken from the default UI.

Consult the sections below for details on what customization options are available and to what extent components can be altered.

Customization Options

Button Primary Color

The button’s primary color can be customized to any RGB value. The value must be provided in the #RRGGBB format and assigned to “primary_color”. Below are depictions of different RGB values.

#33BCF2	#F29233

Button Style

The button’s appearance can be customized by assigning one of the following predefined styles to “button_style”. Below are depictions of BUTTON_STYLE_DEFAULT and BUTTON_STYLE_ROUNDED.

BUTTON_STYLE_DEFAULT	BUTTON_STYLE_ROUNDED

Frame Border Style

The frame’s border can be customized by assigning one of the following styles to “border_style”. Below are depictions of BORDER_STYLE_DEFAULT and BORDER_STYLE_SOLID.

BORDER_STYLE_DEFAULT	BORDER_STYLE_SOLID

Font Family

The font family can be changed by assigning a cascading style sheet (CSS) to “font_css_url”. It is highly recommended to use TTF/OTF and WOFF to ensure that your fonts are supported across all browsers. The CSS file must be formatted as follows.

CSS Format

The @font-face CSS specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font. The file must include the following information.

• font-family: name assigned to the font family.
• src:  URLs for all font files and formats.
• font-weight: set how thick or thin characters in text should be displayed. Can be assigned any of the common weight mapping names or values.
• font-style: specifies the font style. Can be assigned any font styles.
• font-display: determines how a font face is displayed based on whether and when it is downloaded and ready to use. Can be assigned any of the following display keywords.

Here’s an example of a properly formatted CSS font file which includes two different fonts.

@font-face {
   font-family: 'Century Gothic';
   src: url('https://static.s.com/fonts/CenturyGothic/CenturyGothicW05.woff') format('woff'), 
        url('https://static.s.com/fonts/CenturyGothic/CenturyGothicW05.woff2') format('woff2'),
        url('https://static.s.com/fonts/CenturyGothic/CenturyGothicW05.ttf') format('truetype'),
        url('https://static.s.com/fonts/CenturyGothic/CenturyGothicW05-.eot') format('eot');
   font-weight: normal;
   font-style: normal;
   font-display: block;
}

@font-face {
   font-family: 'Verdana';
   src: url('https://static.s.com/fonts/Verdana/VerdanaW05.woff') format('woff'), 
        url('https://static.s.com/fonts/Verdana/VerdanaW05.woff2') format('woff2'),
        url('https://static.s.com/fonts/Verdana/VerdanaW05.ttf') format('truetype'),
        url('https://static.s.com/fonts/Verdana/VerdanaW05-.eot') format('eot');
   font-weight: normal;
   font-style: normal;
   font-display: block;
}

Footer Style

The footer appearing on the “Join Call” window can be customized by assigning one of the following styles to “footer_style”. Take note that the content of the disclaimer’s message can be personalized.

Moderation (Optional Feature)

When the moderation feature has been enabled, the below option will be available allowing a staff member to join the call as moderator. For further details regarding the moderation feature, please with your Booxi representative.

External Resources

@font-face CSS

Common Weight Mapping

There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used.

Font Styles

The following styles can be assigned to a font.

Display Keywords

The following keywords dictate the rendering of any elements using the font face.

Screenshots

Default UI Style	Custom UI Style