To enhance brand recognition, it is common to customize our UI with your branding. This typically involves adjusting the color scheme, modifying icons, and either removing our watermark or incorporating your own brand logo.

In this article, we will outline the necessary steps to develop a branded version of our UI.

To get started, check out the Getting Started with Development steps from our README in the UI repository.

👍

We highly recommend forking our UI repository in case you need customisations.

Once your project is running, we can start making modifications.

Color

Our UI is built using SCSS, which allows for the utilization of variables. This facilitates effortless color changes, as they only require modification in a single location. The color palette utilized in our system can be found in the _variables.scss file.

Icons

In the UI, the icons are represented using SVGs, which are originally colored in Bitmovin blue. However, due to the nature of SVGs, it is straightforward to modify their colors. To do so, you can utilize a text editor of your preference to execute a comprehensive search and replace operation for the Bitmovin blue color within the SVG files. Replace fill:#1FABE2; with your color code in all *.svg files and you're done.

Coloring is just half the possibilities of customizing your icons. Having the same icons as the rest of the application may be the most crucial aspect for the UI to feel at home within your application.

Icons can be replaced directly using CSS by overriding the background-image property of components, or, when working on a customized user interface, by directly replacing the icons in use.

.#{$prefix}-ui-fullscreentogglebutton {
  background-image: url('your-image-path.svg');
}

This additional CSS can be loaded in addition the regular UI CSS or provided to the player by using the supplementalPlayerUiCss property which is available on mobile platforms.

Watermark

Our UI comes with a Bitmovin watermark, which does not suit everyone. To remove the watermark, simply remove the watermark component from your UI component tree. See Build a custom UI structure for instructions.

Should you wish to substitute our watermark with your own, you can do so by simply changing the icon.