Contact usRequest a demo

UI theming cheat sheet on a single page

This page combines the theming configuration property information in a single page. This allows you to search the configuration properties using Ctrl+F in your browser.

General theming

The configuration properties on this page affect all Unblu UIs.

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.

Unblu product color palette
Figure 1. Unblu product color palette

  1. Primary palette: com.unblu.theme.color.primary

    Extended primary color palette:

  2. Secondary palette: com.unblu.theme.color.secondary

    Extended secondary color palette:

  3. Neutral palette: com.unblu.theme.color.neutral

    Extended neutral color palette:

  4. Gray palette: com.unblu.theme.color.gray

    Extended gray color palette:

Feedback colors and secondary color map

Feedback colors and secondary color map
Figure 2. Feedback colors and secondary color map

  1. Announcement highlight color: com.unblu.theme.color.announcement

  2. Success highlight color: com.unblu.theme.color.success

  3. Warning highlight color: com.unblu.theme.color.warning

  4. Error highlight color: com.unblu.theme.color.error

  5. Secondary color map: com.unblu.theme.color.secondaryColorMap.

    Colors used for secondary elements such as avatars and virtual mouse cursor labels are chosen randomly from a set of colors determined in the configuration key above.

The info toasts for the various feedback types are configured separately. Refer to Info toasts below.

Finding an element’s color configuration property

While you’re configuring the Unblu UIs to better match your organization’s design guidelines, a common problem is determining which configuration property you need to change to modify the color of a certain UI element (or set of UI elements). This is actually easier than it may seem, because the names of the CSS custom properties that specify the color of a UI element correspond closely to the name of the configuration property where it’s defined.

To find the color configuration property for a particular UI element, proceed as described below. The terms used refer to Google Chrome and may differ slightly in other browsers such as Mozilla Firefox or Safari. In Safari, you must enable the option Show features for web developers in the Advanced settings to follow the steps.

  1. In the Unblu UI, right-click the element you’re interested in, then click Inspect. This opens your browser’s developer tools and highlights the element you clicked in the Elements panel.

    You can confirm which element is selected by moving your cursor over the elements in the panel. This highlights the corresponding element in the UI.

  2. With the element of interest selected in the Elements panel, switch to the Styles pane if it isn’t already displayed. You can now review the styling of the element.

    Colors appear with a small preview of the color itself as well as the variable reference to the custom CSS property used. For example, the sidebar of the Agent Desk includes the following styling:

    background-color: var(--com-unblu-nav-ui-navBarBackground);

  3. Copy the name of the variable that defines the color. Be sure to include the leading hypens --.

  4. Open the Account Configuration interface. In the sidebar, click Settings in the Account section.

  5. On the Settings tab, paste the reference to the custom CSS property into the Filter box. This automatically translates the property name into the configuration property key and displays the configuration property so you can change its value.

Often, the color of a UI element refers to a color defined in another, more general configuration property. If you want to change the color across all UI elements, adapt the configuration property for the color palette, not the UI element.

Font

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

Font configuration
Figure 3. Font configuration

  1. Font family

  2. Headings

  3. Paragraphs

  4. Font line height

  5. Font color

Buttons

General style for buttons
Figure 4. General style for buttons

  1. Radius

  2. Button padding

  3. Icon button padding

  4. Font weight

  5. Line height

Primary and secondary buttons

Primary and secondary buttons
Figure 5. Primary and secondary buttons

  1. Primary button style

  2. Secondary button style

  3. Other

Flat primary and secondary buttons

Flat primary and secondary buttons
Figure 6. Flat primary and secondary buttons

  1. Flat primary button style

  2. Flat secondary button style

Flat inverted buttons

Flat inverted button
Figure 7. Flat inverted button

Toggle buttons

Toggle button
Figure 8. Toggle button

Flat toggle buttons

Flat toggle buttons
Figure 9. Flat toggle buttons

Info toasts

Info toasts
Figure 10. Info toasts

  1. Toast icon color

  2. Toast background color

  3. Toast border color

  4. Toast text color

Conversation theming

The configuration properties listed here affect the conversation panel in the following Unblu UIs:

  • The Agent Desk

  • The Floating Visitor UI

  • The Embedded Visitor UI

  • The Single Conversation Desk

  • The Visitor Desk

Conversation control elements

Chat conversation panel
Figure 11. Chat conversation panel, onboarding with concierge

  1. Unblu Concierge

    Refer to Concierge person for information on changing the name and avatar of the concierge.

  2. Secondary button style

    Refer to Primary and secondary buttons.

  3. Primary button style

    Refer to Primary and secondary buttons.

  4. Back button

    The configuration property com.unblu.visitor.ui.pinentry.allowBack determines whether the visitor’s chat action bar should contain the back button Back arrow, which lets them return to the conversation overview.

  5. Flat inverted button

    Refer to Flat inverted buttons

Conversation panel appearance

Conversation panel
Figure 12. Conversation panel, general theming

  1. Chat background

  2. System messages

  3. Typing indicator color

  4. Message input

Send button

To replace the icon on the Send button, refer to Enterprise UX Kit. You can influence the button’s appearance with the following properties.

Chat message theming

You can customize the appearance of both public message (visible to all participants) and internal messages (visible only to participating agents).

Conversation panel
Figure 13. Conversation panel, chat message theming

  1. Message header

  2. My messages

    These are messages sent by the person viewing the conversation panel.

  3. Other messages

    These are messages sent by other participants in the conversation.

  4. Avatar position

  5. Links

Replies to individual messages

  1. Text input field

  2. Replies in the conversation timeline

Internal messages

Internal messages
Figure 14. Internal message theming

Internal message headers * com.unblu.conversation.messaging.ui.textColorInternalMsgHeader * com.unblu.conversation.messaging.ui.textSizeInternalMsgHeader * com.unblu.conversation.messaging.ui.colorInternalMsgStateTick * com.unblu.conversation.messaging.ui.colorInternalMsgStateTickUnread

  1. My internal messages

  2. Other internal messages

Internal replies in the conversation timeline

Markdown

Video and voice chat conversation panel

The settings in this section affect both agent and visitor UIs.

Before answering the call

Video and voice chat conversation panel before answering the call
Figure 15. Video and voice chat conversation panel before answering the call

  1. Call background

  2. Accept button color

  3. Decline button color

  4. Call action button style

  5. Call type background

  6. Call links

During the call

Video and voice chat conversation panel during the call
Figure 16. Video and voice chat conversation panel during the call

  1. Call toggle button style

  2. Minimized video dimensions

Picture-in-picture (PiP)

The configuration properties in this section also apply to PiP in the Unblu mobile SDKs.

Action bar in conversation recordings

Visitor UI theming

The configuration properties listed here affect the Unblu visitor UIs:

  • The Floating Visitor UI

  • The Embedded Visitor UI

  • The Visitor Desk

Some of the configuration properties don’t affect all visitor UIs. For example, only the Floating Visitor UI has a launcher button, so the launcher button configuration properties only affect that UI.

Launcher button

Launcher button and notification badge
Figure 17. Launcher button and notification badge

  1. Launcher button

  2. Launcher button notification badge

Engagement UI

Visitor online and offline conversation panels
Figure 18. Visitor online and offline conversation panels

  1. Action bar

  2. Displayed logo

    1. com.unblu.visitor.ui.engagement.agentAvailableLogo

    2. com.unblu.visitor.ui.engagement.agentAwayLogo

  3. Font

  4. Primary button

    Refer to Primary and secondary buttons

  5. Secondary button

    Refer to Primary and secondary buttons

  6. Online background color

  7. Offline background gradient color

  8. Spacing

  9. Flat secondary button

    Refer to Flat primary and secondary buttons.

Meeting UI

PIN entry panel

PIN entry panel
Figure 19. PIN entry panel

  1. PIN UI logo

  2. Header text

  3. Input field style

  4. Body text

  5. PIN UI background

Conversation inbox and file panels

Conversation inbox and file panels
Figure 20. Conversation inbox and file panels

  1. Conversation list background

  2. Last unread message

  3. Last read message

  4. Sender’s label style

  5. Last message time style

  6. Notification badge

  7. Title style

  8. List item state

  9. Divider

  10. File list background color

Collaboration space

Splash screen

Visitor collaboration space splash screen
Figure 21. Visitor collaboration space splash screen

  1. Loading splash screen

  2. Loading splash screen icon

  3. Loading splash screen text color

  4. Loader color

Collaboration space control bar

Visitor collaboration space control bar
Figure 22. Visitor collaboration space control bar

  1. Visitor layer menu button

  2. Layer action button

Other collaboration space UI elements

Visitor collaboration space
Figure 23. Visitor collaboration space, other UI elements

  1. Capturing frame

  2. Click feedback animation

  3. Secondary color map

    These are colors used for secondary elements such as avatars and virtual mouse cursor labels. The colors are chosen randomly from those defined in com.unblu.theme.color.secondaryColorMap. For more information, refer to Feedback colors and secondary color map.

Mobile collaboration space

Visitor mobile collaboration space
Figure 24. Visitor mobile collaboration space

  1. Visitor layer menu

    Refer to Collaboration space control bar.

  2. Layer control toggle button

Agent UI theming

There are two primary user interfaces for agents:

  • The Agent Desk

  • The Single Conversation Desk

General agent UI theming

The configuration properties in the sections below affect both the Agent Desk and the Single Conversation Desk.

Meeting UI

com.unblu.conversation.meetingui.colorMeetingUiBackground com.unblu.conversation.meetingui.pipWindowHeight com.unblu.conversation.meetingui.pipWindowWidth

Action bar

Modal dialogs in agent UIs
Figure 25. Modal dialogs in agent UIs

  1. Modal dialog background color

Notification toasts

Agent notification toasts
Figure 26. Agent notification toasts

  1. Notification toasts

Bot threads

Bot threads
Figure 27. Bot threads

  1. Bot thread line

  2. Bot thread status icon color

Quick replies

Quick replies with only the first five visible
Figure 28. Quick replies with only the first five visible

Agent collaboration space

Critical action button, flat inverted button, and marker color area

Agent collaboration space critical action button
Figure 29. Agent collaboration space critical action button, flat inverted button, and marker color area

  1. Critical primary button

  2. Critical secondary button

  3. Marker area color

Agent Desk

The configuration properties below only affect the Agent Desk.

Agent Desk sidebar
Figure 30. Agent Desk sidebar

  1. Background color

  2. Active highlight

  3. Navigation buttons

  4. Dropdown select elements

    The configuration properties below are used for the plus menu Plus menu icon, the user menu and the overflow menu Kebab menu icon in the control bar.

Queue

Agent Desk queue
Figure 31. Agent Desk queue

  1. Top bar button

  2. Flat primary button style

    Refer to Flat primary and secondary buttons for other buttons theming.

  3. Request icons

    You can define the background color of the request icons separately from the icons themselves:

    The same icons and colors are used on the notification toasts for incoming requests. For information on replacing icons, refer to Enterprise UX Kit.

  4. Icon display

  5. Reserved badge

Inbox

agent desk inbox

  1. Conversation tab style

Conversation history

Agent Desk conversation history
Figure 32. Agent Desk conversation history

  1. Select box

  2. Bar color background

  3. List items

  4. Secondary value

  5. Divider

Headless browser theming

The headless browser is used for universal co-browsing and server-based document collaboration. It has four default pages, each consisting of an image and some text. These text and configuration properties can be customized.

You can change the colors for all four pages:

Universal co-browsing "About" page

This landing page can be used for new "Websites" collaboration layers. The local URL to display this page is about:unblu.universal-cobrowsing.

You can change the default page with com.unblu.conversation.headless-browser.defaultNewWindowLocation.

Universal co-browsing "about" page
Figure 33. Universal co-browsing "About" page

The text items can be changed with:

Server-based document collaboration "About" page

This landing page is used for new server-based "Documents" collaboration layers. The local URL to display this page is about:unblu.document-cobrowsing.

Server-based document collaboration "about" page
Figure 34. Server-based document collaboration "About" page

The text can be changed with:

Error page

The error page is displayed when an error occurs:

Headless browser error page
Figure 35. Headless browser error page

The text items can be changed with:

Crash page

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

Headless browser crash page
Figure 36. Headless browser crash page

Native document collaboration viewer theming

General

Marker

Buttons

Other viewer UI elements

Mobile theming

Action bar in visitor-side apps

Action bar in agent-side apps

Mobile co-apping indicator

Active call 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. In the configuration property com.unblu.ui.branding.externalBrandResourcesUrl, add a URL that points 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

  • Progressive web app logos

    The progressive web app logos are used if you install the Agent Desk as a progressive web app (PWA).

    • Progressive web app logo, 192x192 px

      • 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

      • 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)

      • 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 serves 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

When com.unblu.visitordesk.ui.admission.logo is set to BRAND_LOGO or BRAND_LOGO_INVERSE, the width of the logo displayed at the top of the "Request admission", "Waiting room", and "Conversation ended" pages in the Visitor Desk can be configured using com.unblu.visitordesk.ui.admission.logoWidth. The height is adjusted automatically to preserve the aspect ratio of the logo.

See also

  • For information on customizing individual icons throughout the Unblu UIs, refer to Enterprise UX Kit.

Enterprise UX Kit

The Enterprise UX Kit provides additional theming, branding, and integration options for the Unblu UI. It lets you replace individual icons with custom SVGs and customize loading animations with custom animated SVGs.

The Enterprise UX Kit is available since Unblu 8.24.0.

The Enterprise UX Kit is a separately licensed feature of Unblu. The icon configuration properties are only visible and editable in the Account Configuration interface with a valid license.

Custom icons

With the Enterprise UX Kit, the icons and loading animations used in Unblu UIs are available as configuration properties in the Account and Global Server Configuration interfaces.

  • The icon configuration properties are available in the scopes GLOBAL, ACCOUNT, AREA, TEAM, USER, and APIKEY. This means you can configure different icon sets for different contexts, such as mobile integrations, named areas, or teams.

  • The keys of the icons' configuration properties all begin with com.unblu.theme.icons.*.

  • Each icon must be specified as an SVG <symbol>. No other image formats are supported.

Custom loading animations

Loading animations can be customized using the same SVG symbol approach as icons. To create a custom loading animation, provide an SVG <symbol> element that includes embedded SVG animations such as <animate> or <animateTransform> elements.

SVG symbol format

The SVG <symbol> element for an icon must meet the following requirements:

  • The id attribute must match the ID specified in the description of the icon’s configuration property and used in the default icon.

  • The <symbol> element must include the viewBox attribute. The default icons use a view box of 0 0 20 20.

  • Any custom loading animations must be embedded directly in the SVG. CSS animations are not supported.

The following example shows the default value of the add-circle-filled icon:

<symbol id="x-unblu-icon-add-circle-filled" viewBox="0 0 20 20">
  <path fill-rule="evenodd"
    d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m0 3a.75.75 0 0 1
       .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0
       1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75
       0 0 1 10 5"
    clip-rule="evenodd"/>
</symbol>

To replace this icon, provide your own SVG <symbol> element with the same id value (x-unblu-icon-add-circle-filled) in the configuration property com.unblu.theme.icons.addCircleFilledSymbol.

The icon editor

The configuration interfaces include a built-in icon editor with the following features:

  • Upload an SVG file

  • Remove colors so the icon inherits the theme colors

  • Preview the icon, both alone and on buttons

  • Edit the raw SVG markup

To access the icon editor, open the configuration property that defines the icon in the Account Configuration interface and click the preview of the current icon.

See also