On Premise UI Customization

N.B. This applies to the unblu embedded co-browsing component only

1. Overview

Unblu allows you to customize the unblu product UI to fit your companies corporate design by setting different configuration parameters that will be explained below.

2. Brand resources

2.1. General

configuration key : com.unblu.ui.branding.externalBrandResourcesUrl

type: Url (To reference a local file use the file:// prefix. You can add authentication credentials like so: https://username:password@your.domain/path/to/zip/brand.zip)
description: With the brand resources you may add your own logos etc. instead of the default unblu logos.
The Url must point to a non-encrypted zip file containing the following files: favicon.ico, logo.png, logo_icon.png in the root of the archive.
If one of the images is missing or does't fit the specifications, the unblu default will be used as fallback.
Make sure the temporary directory configured in your servlet container points to a folder that is accessible by the application since the un-zipped files are stored there. (Java environment variable: java . io . tmpdir )
Check the server startup log if one of the files doesn't behave as expected.
See the next sections for details and constraints on the different files.

2.2. Favicon

file name: "favicon"
file extension: ".ico"
max size: 100kb
description: This file will be used as favicon in the browser. (Typically displayed on the pages tab and in the bookmarks). 
default :  
file name: "logo"
file extension: ".png"
max size: 500kb
min width: 50px
max width: 300px
min height: 50px
max height: 144px
description: The logo image is displayed on the login, the loading and error the page.
default:  

2.4. Logo Icon

file name : "logo_icon" 
file extension: ".png"
max size: 100kb
min width: 46px
max width: 96px
min height: 46px
max height: 46px
description: If activated the logo icon is displayed on the right side of the agent tab bar (top bar on the agent desk). It may be activated with the configuration key: com.unblu.core.client.desk.showLogo=true (flase by default)
  default:  

3. Color customization

3.1. Brand colors

By setting the brand colors all non-black/grey/white colors in the unblu product may be changed to the ones of your brand. Shades of these colors used e.g. for hover states are automatically calculated on these configurations.

3.1.1. Primary brand color

configuration key: com.unblu.ui.colorBrandPrimary
type : CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ? unblu orange
description: The primary color is used mainly for highlighting primary actions and active sections. It should be a catching, highly saturated color. Text on it is displayed white so it should not be too bright.

3.1.2. Secondary brand color

configuration key: com.unblu.ui.colorBrandSecondary
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ? unblu turquoise
description: The secondary color is used as second accent color complementing the primary brand color. It should be a saturated color that goes well with the primary color since they are often used side by side. Text on it is displayed white so it should not be too bright.

3.1.3. Brand background color

configuration key: com.unblu.ui.colorBrandBackground
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ? unblu dark blue
description: The background color is used for backgrounds e.g. modal dialog backdrops. It should be a very dark color. Text on it is displayed white.

3.2. Text colors

3.2.1. Dark text

configuration key: com.unblu.ui.colorTextDark
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ?
description: The dark text color is used for all high-contrast text and should be a very dark color. It is displayed on bright backgrounds.

3.2.2. Medium text

configuration key: com.unblu.ui.colorTextMid
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ?
description: The medium text color is used for secondary text. It is displayed on bright backgrounds.

3.2.3. Light text

configuration key: com.unblu.ui.colorTextLight
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ?
description: The light text color is used for muted text. It is displayed on bright backgrounds.

3.2.4. Inverted text

configuration key: com.unblu.ui.colorTextInverted
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ? (white)
description: The inverted text color is used on brand color and dark backgrounds and should be very bright.

4. Additional UI customization

4.1. Border radius'

4.1.1. General component border radius

configuration key: com.unblu.ui.borderRadiusComponent
type : Non-fractional number (will be used a pixel value in css)
default: 4
description: This configuration is used for the border radius of all general components like dialogs or panels.

4.1.2. Button border radius

configuration key: com.unblu.ui.borderRadiusButton
type : Non-fractional number (will be used a pixel value in css)
default: 100
description: This configuration is used for the border radius of all buttons.

4.1.3. Input border radius

configuration key: com.unblu.ui.borderRadiusInput
type : Non-fractional number (will be used a pixel value in css)
default: 2
description: This configuration is used for the border radius of all input elements.

4.2. Loading page

Since the login page is served as standalone page detached from the rest of the unblu application it must be styled separately

4.2.1. Loading animation color

configuration key: com.unblu.loading.colorLoader
type : CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default: ? unblu orange
description: Color used for the animated loader circles.
.

4.2.2. Web links color

configuration key: com.unblu.loading.colorLinks
type: CSS compliant color string (e.g. #ff0033 or rgba(255,128,2,0.5) )
default:   ? unblu dark blue
description: Color used for the links on the loading page.

How can we help?

Chat with us and we will take you through our site!