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

com.unblu.theme.color.primary

com.unblu.theme.color.secondary

Extended:

Extended:
3. Neutral palette 4. Gray palette

com.unblu.theme.color.neutral

com.unblu.theme.color.gray

Extended:

Extended:

Feedback colors and secondary color map

feedback and secondary colors

Font configuration

You can configure the size, color, and weight of the text, but you can’t configure their placement in the UI. For example, if the UI uses a header 1 style, you can’t change it to header 2.

font configuration

General style for buttons

general style for buttons

Primary and secondary buttons

primary and secondary buttons

Flat primary and secondary buttons

flat primary and secondary buttons

Flat inverse button

flat inverse button

Toggle button style

toogle button style

Flat toggle button style

flat toogle buttons

Info toasts

info toasts

Replies to individual messages

Visitor theme

Launcher button

launcher button

Engagement UI

conversation panels

PIN entry panel

pin entry panel

Conversation inbox and asset panels

conversation inbox assets panels

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 (1/2)

video chat conversation panel 1

Video chat conversation panel (2/2)

video chat conversation panel 2

Visitor collaboration space (1/3)

visitor collaboration space 1

Visitor collaboration space (2/3)

visitor collaboration space 2

Visitor collaboration space (3/3)

visitor collaboration space 3

Visitor mobile collaboration space

visitor mobile collaboration space

Agent UI theme

Agent Desk (1/2)

agent desk 1

Agent Desk (2/2)

agent desk 2

Agent Desk collaboration space (1/6)

agent desk collaboration space 1

Agent Desk collaboration space (2/6)

agent desk collaboration space 2

Agent Desk collaboration space (3/6)

agent desk collaboration space 3

Agent Desk collaboration space (4/6)

agent desk collaboration space 4

Agent Desk collaboration space (5/6)

agent desk collaboration space 5

Agent Desk collaboration space (6/6)

agent desk collaboration space 6

Agent Desk inbox

agent desk inbox

Action bar

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

modal dialog

Agent Desk conversation history

agent desk conversation history

Bot threads

agent desk bot threads

Account UI theme

Account space side navigation

account space side navigation

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

Action bar in conversation recordings

Mobile theme

Action bar in visitor-side apps

Action bar in agent-side apps

Mobile co-browsing indicator

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