Contact usRequest a demo

UI theming cheat sheet

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.

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

You can’t change the icon on the Send button, but you can influence the button’s appearance.

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

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

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.

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 priamry 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.

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.

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 co-browsing. 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 co-browsing "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 co-browsing "about" page
Figure 34. Server-based document co-browsing "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 co-browsing 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-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. 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

    • Default:

      logo inverse

  • 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