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.
Web Booxi UI | Mobile Booxi UI |
Joining call
| Joining call
|
Video Conference Window
| Video Conference Window |
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.
FOOTER_STYLE_DEFAULT | FOOTER_STYLE_TEXT |
 Setting the footer style to “default” will display a “Powered by Booxi” logo. |  Setting the style to “text” will replace the logo with a generic or custom disclaimer. |
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.
Value | Common Weight Name |
100 | Thin (Hairline) |
200 | Extra Light (Ultra Light) |
300 | Light |
400 | Normal |
500 | Medium |
600 | Semi Bold (Demi Bold) |
700 | Bold |
800 | Extra Bold (Ultra Bold) |
900 | Black (Heavy) |
Font Styles
The following styles can be assigned to a font.
Style | Description |
normal | Selects the normal version of the font-family. |
italic | Specifies that font-face is an italicized version of the normal font. |
oblique | Specifies that the font-face is an artificially sloped version of the normal font. |
Display Keywords
The following keywords dictate the rendering of any elements using the font face.
Keyword | Description |
auto | The font display strategy is defined by the user agent. |
block | Gives the font face a short block period and an infinite swap period. |
swap | Gives the font face an extremely small block period and an infinite swap period. |
fallback | Gives the font face an extremely small block period and a short swap period. |
optional | Gives the font face an extremely small block period and no swap period. |
Screenshots
Default UI Style | Custom UI Style |
 |  |