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: favicon

example: favicon

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: team-avatar.png

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

results matching ""

    No results matching ""