Contact usRequest a demo

UI theming cheat sheet

Collection of property keys to assist you in configuring the Unblu user interface

Where to start

To configure the theming of your Unblu installation, you must be an Admin or Superadmin. Log in to the Account Configuration interface, then click Settings in the navigation sidebar.

For information on the features of the Settings tab refer to the relevant section of the Account Configuration interface guide.

The settings available to you to adapt the Unblu theming to your requirements are listed below.

General configuration

Colors

The product color palette is defined by four main colors: primary, secondary, neutral, and gray. Each of these colors has an extended color palette composed of varying degrees of saturation/brightness which can be used throughout various elements of the user interface.

colors

1. Primary palette 2. Secondary palette
3. Neutral palette 4. Gray palette

Feedback colors and secondary color map

feedback and secondary colors

Visitor theme

Launcher button

launcher button

Chat conversation panel (1/3)

chat conversation panel 1

Chat conversation panel (2/3)

Both the appearance of public (visible to all) and internal messages (visible only to agents) can be customized.

chat conversation panel 2

Chat conversation panel (3/3)

Both the appearance of public (visible to all) and internal messages (visible only to agents) can be customized.

chat conversation panel 3

Video chat conversation panel (2/2)

video chat conversation panel 2

Visitor collaboration space (2/3)

visitor collaboration space 2

Visitor collaboration space (3/3)

visitor collaboration space 3

Agent UI theme

Agent Desk collaboration space (5/6)

agent desk collaboration space 5

Headless browser theme

The headless browser displays four default pages that consist of an image and some text. These text and configuration properties can be customized.

It’s possible to change the colors for all the pages:

Universal co-browsing "about" page

This landing page can be used when a new "Websites" collaboration layer is opened. It’s possible to change the default page with com.unblu.conversation.headless-browser.defaultNewWindowLocation.

The local URL to display this page is about:unblu.universal-cobrowsing.

about websites

The text items can be changed with:

Document co-browsing "about" page

This landing page is used when a new "Documents" collaboration layer is opened.

The local URL to display this page is about:unblu.document-cobrowsing.

about document

The text can be changed with:

Error page

The error page is displayed when an error occurs:

error

The text items can be changed with:

Crash page

The crash page is displayed when the process rendering the page crashes.

crash

Branding

You can customize the Unblu on-premises product UI to fit your company’s corporate design by adding your own logos instead of the default Unblu logos.

The URL must point to an unencrypted ZIP file containing the following files in the root of the archive:

  • favicon.ico

  • logo.png

  • logo_icon.png

  • logo_inverse.png

If one of the files is missing, the Unblu defaults are used.

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

Make sure the temporary directory configured in your servlet container points to a folder that’s accessible by the application since the unzipped files are stored there. The relevant Java environment variable is java.io.tmpdir.

Check the server startup log if one of the files doesn’t behave as expected.

Favicon
  • Description: This file is used as the favicon in the browser. It’s typically displayed on the page’s tab and in the bookmarks.

  • File name: favicon

  • File extension: .ico

  • Max size: 100kb

  • Default: favicon

Logo
  • Description: The logo image is displayed on the login, the loading, and the error page.

  • File name: logo

  • File extension: .png

  • Max size: 500kb

  • Min width: 50px

  • Max width: 300px

  • Min height: 50px

  • Max height: 144px

  • Default: logo

Logo icon
  • Description: The logo icon is displayed on the right side of the agent tab bar (top bar in the Agent Desk). The logo icon is also used for web notifications (notifications displayed by the browser).

  • File name: logo_icon

  • File extension: .png

  • Max size: 100kb

  • Min width: 46px

  • Max width: 96px

  • Min height: 46px

  • Max height: 46px

  • Default: logo icon

Logo inverse
  • Description: The Logo Inverse is displayed at the top of the navigation menu and any other location where the logo appears on a dark background (usually the brand background color).

  • File name: logo_inverse

  • File extension: .png

  • Max size: 500kb

  • Min width: 50px

  • Max width: 300px

  • Min height: 50px

  • Max height: 144px

  • Default: logo inverse

Concierge avatar
  • Description: The avatar used for the concierge.

  • File name: concierge-avatar

  • File extension: .png

  • Max size: 500kb

  • Min width: 48px

  • Max width: 500px

  • Min height: 48px

  • Max height: 500px

  • Default: concierge avatar