On Premises UI Customization
unblu allows you to customize the unblu product UI to fit your company's corporate design by setting different configuration parameters that will be explained below.
If you want to customize your fonts see Using Custom Webfonts.
Brand Resources
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, logo_inverse.png, team_avatar.png, agent_avatar.png, in the root of the archive.
If one of the images is missing or does not 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 unzipped files are stored there. (Java environment variable: java.io.tmpdir
)
Check the server startup log if one of the files does not behave as expected.
See the next sections for details and constraints on the different files.
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:
example:
Logo
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 the error the page.
default:
example:
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
(false by default). Also used for WebNotifications (notifications displayed by the browser).
default:
example:
Logo Inverse
file name: "logo_inverse"
file extension: ".png"
max size: 500kb
min width: 50px
max width: 300px
min height: 50px
max height: 144px
description: The Logo Inverse is displayed at the top of the navigation menu and any other location where it is placed on a dark background (usually the brand background color).
default:
example:
Team Avatar
file name: "team_avatar"
file extension: ".png"
max size: 100kb
min width: 32px
max width: 192px
min height: 32px
max height: 192px
description: Displayed beside team names when forwarding a session to a team.
default:
Agent Avatar
file name: "agent_avatar"
file extension: ".png"
max size: 100kb
min width: 32px
max width: 192px
min height: 32px
max height: 192px
description: Displayed beside agent names when forwarding a session to an agent, and next to chat messages from the agent.
default:
Color Customization
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.
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.
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 a 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.
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.
Text Colors
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.
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.
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.
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.
Border Radius
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 such as dialogs or panels.
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.
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.
- deployonprem