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

Action bar

The configuration properties above affect both the Agent Desk and the Single Conversation Desk.

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:

Server-based 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

Native document co-browsing viewer theme

Mobile theme

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

  • logo_pwa_192.png

  • logo_pwa_512.png

  • logo_pwa_vector.svg

  • product_logo_icon.png

  • call-dial-in-avatar.png

  • call-video-background-replacement.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
  • 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: 100 KB

  • Default: favicon

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

  • File name: logo

  • File extension: .png

  • Max size: 500 KB

  • Min width: 50 px

  • Max width: 300 px

  • Min height: 50 px

  • Max height: 144 px

  • Default:

    logo
Logo icon
  • 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: 100 KB

  • Min width: 46 px

  • Max width: 96 px

  • Min height: 46 px

  • Max height: 46 px

  • Default:

    logo icon
Inverse logo
  • The inverse logo 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: 500 KB

  • Min width: 50 px

  • Max width: 300 px

  • Min height: 50 px

  • Max height: 144 px

  • Default:

    logo inverse
Progressive web app logo, 192x192 px
  • The progressive web app logo is used if you install the Agent Desk as a progressive web app (PWA).

  • File name: logo_pwa_192

  • File extension: .png

  • Max size: N/A

  • Min width: 192 px

  • Max width: 192 px

  • Min height: 192 px

  • Max height: 192 px

  • Default:

    logo pwa 192
Progressive web app logo 512x512 px
  • The progressive web app logo is used if you install the Agent Desk as a progressive web app (PWA).

  • File name: logo_pwa_512

  • File extension: .png

  • Max size: N/A

  • Min width: 512 px

  • Max width: 512 px

  • Min height: 512 px

  • Max height: 512 px

Progressive web app logo (SVG format)
  • The progressive web app logo is used if you install the Agent Desk as a progressive web app (PWA).

  • File name: logo_pwa_vector

  • File extension: .svg

  • Max size: 500 KB

  • Min width: N/A

  • Max width: N/A

  • Min height: N/A

  • Max height: N/A

Product logo icon
  • The product logo icon is used for web notifications and other places where you need the Unblu logo as an icon.

  • File name: product_logo_icon

  • File extension: .png

  • Max size: 100 KB

  • Min width: 46 px

  • Max width: 96 px

  • Min height: 46 px

  • Max height: 46 px

  • Default:

    product logo icon
Call dial-in avatar
  • The call dial-in avatar is used for participants who have dialed in to a call with a normal phone.

  • File name: call-dial-in-avatar

  • File extension: .png

  • Max size: 500 KB

  • Min width: 48 px

  • Max width: 500 px

  • Min height: 48 px

  • Max height: 500 px

  • Default:

    call dial in avatar
Video call background replacement
  • The video call background replacement image is used as the background replacement in video calls if the com.unblu.conversation.call.background.replacementImageSource is set to BRANDING_RESOURCES.

  • File name: call-video-background-replacement

  • File extension: .png

  • Max size: 1000 KB

  • Min width: 400 px

  • Max width: 1920 px

  • Min height: 600 px

  • Max height: 1200 px