This document describes version 6 of Unblu. If you’re using the latest major version of Unblu, go to the documentation of the latest version.

The support period for version 6 ended on 29 August 2023. We no longer provide support or updates for this version. You should upgrade to the latest version of Unblu.

Unblu UI theming cheat sheet

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

Where to start

In order to start configuring your Unblu theming you must be an Admin or Superadmin. Once logged in, go to your Account space by clicking on the top right avatar and choosing “Manage account” from the list.

In the Account space side navigation bar, choose “Settings”.

where to start settings

The Settings tab allows you to filter through configurations with the possibility of doing a more specific search by clicking on the Advanced button.

The advanced search allows you to match your filter value against a:

Label: filter for words in the configuration label.
Description: filter for words in the description of a configuration label.
Key: filter by the configuration property key
Group: filter for a specific group configuration block, such as: Font Configuration, Agent desk left navigation bar style, etc…

Under Options the following are available:

Show inherited (global level, product default): this filter is checked by default. It displays configuration settings that have been changed on account level.
Show unpopular (called “show internal” for superadmins): set of configuration keys that are not used often.
Technical labels: displays the configuration labels with technical names. When exchanging information about configurations, technical labels are required.

where to start settings filters

General configurations

Colors

The product color palette is defined by four main colors: primary, secondary, neutral and gray. Each of these colors have 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: com.unblu.theme.color.primary050 com.unblu.theme.color.primary100 com.unblu.theme.color.primary200 com.unblu.theme.color.primary300 com.unblu.theme.color.primary400 com.unblu.theme.color.primary500 com.unblu.theme.color.primary600 com.unblu.theme.color.primary700 com.unblu.theme.color.primary800 com.unblu.theme.color.primary900	Extended: com.unblu.theme.color.secondary050 com.unblu.theme.color.secondary100 com.unblu.theme.color.secondary200 com.unblu.theme.color.secondary300 com.unblu.theme.color.secondary400 com.unblu.theme.color.secondary500 com.unblu.theme.color.secondary600 com.unblu.theme.color.secondary700 com.unblu.theme.color.secondary800 com.unblu.theme.color.secondary900

1. Primary palette

2. Secondary palette

com.unblu.theme.color.primary

com.unblu.theme.color.secondary

Extended:

3. Neutral palette	4. Gray palette
com.unblu.theme.color.neutral	com.unblu.theme.color.gray
Extended: com.unblu.theme.color.neutral050 com.unblu.theme.color.neutral100 com.unblu.theme.color.neutral200 com.unblu.theme.color.neutral300 com.unblu.theme.color.neutral400 com.unblu.theme.color.neutral500 com.unblu.theme.color.neutral600 com.unblu.theme.color.neutral700 com.unblu.theme.color.neutral800 com.unblu.theme.color.neutral900	Extended: com.unblu.theme.color.gray050 com.unblu.theme.color.gray100 com.unblu.theme.color.gray200 com.unblu.theme.color.gray300 com.unblu.theme.color.gray400 com.unblu.theme.color.gray500 com.unblu.theme.color.gray600 com.unblu.theme.color.gray700 com.unblu.theme.color.gray800 com.unblu.theme.color.gray900

3. Neutral palette

4. Gray palette

com.unblu.theme.color.neutral

com.unblu.theme.color.gray

Extended:

Feedback colors and secondary color map

feedback and secondary colors

1. Announcement highlight color: com.unblu.theme.color.highlightAnnouncement
2. Success highlight color: com.unblu.theme.color.highlightSuccess
3. Warning highlight color: com.unblu.theme.color.highlightWarning
4. Error highlight color: com.unblu.theme.color.highlightError
5. Secondary color map: com.unblu.theme.color.secondaryColorMap. Colors used for secondary elements such as avatars and virtual mouse cursor labels. These colors are chosen randomly from a set of colors determined in the configuration key above.

Font configuration

Size, color, weight of the text are properties that can be configured, however their placement in the UI cannot be modified. For example, if the UI uses a header 1 style, one cannot change it to h2.

font configuration

1. Font family
- Name: com.unblu.ui.branding.fontFamilyWebfont
- URL: com.unblu.ui.branding.fontFamilyWebfontCssUrl
- Fallback font: com.unblu.theme.font.fontFamilyFallback
2. Headings
- Weight
  - com.unblu.theme.font.fontWeightNormal
  - com.unblu.theme.font.fontWeightSemibold
- Sizes
  - Heading 1: com.unblu.theme.font.heading1Size
  - Heading 2: com.unblu.theme.font.heading2Size
  - Heading 3: com.unblu.theme.font.heading3Size
- Color
  - com.unblu.theme.font.headingsFontColor
3. Paragraphs
- Sizes
  - Standard: com.unblu.theme.font.paragraphSize
  - Small: tcom.unblu.theme.font.textSmallSize
  - Tiny: com.unblu.theme.font.textTinySize
4. Font line height
- com.unblu.theme.font.lineHeight
5. Font color
- Link
  - com.unblu.theme.font.colorLink
  - com.unblu.theme.font.colorLinkDark
- Text
  - Body: com.unblu.theme.font.colorTextBody
  - Mid: com.unblu.theme.font.colorTextMid
  - Dark: com.unblu.theme.font.colorTextDark
  - Inverted: com.unblu.theme.font.colorTextInverted
  - Inverted mid: com.unblu.theme.font.colorTextInvertedMid
  - Announcement: com.unblu.theme.font.colorTextAnnouncement
  - Success: com.unblu.theme.font.colorTextSuccess
  - Warning: com.unblu.theme.font.colorTextWarn
  - Error: com.unblu.theme.font.colorTextError

General style for buttons

general style for buttons

1. Radius
- com.unblu.theme.button.borderRadius
2. Button padding
- Button tiny
  - Horizontal: com.unblu.theme.button.horizontalPaddingButtonTiny
  - Vertical: com.unblu.theme.button.verticalPaddingButtonTiny
- Button small
  - Horizontal: tcom.unblu.theme.button.horizontalPaddingButtonSmall
  - Vertical: com.unblu.theme.button.verticalPaddingButtonSmall
- Button standard
  - Horizontal: com.unblu.theme.button.horizontalPaddingButtonStandard
  - Vertical: com.unblu.theme.button.verticalPaddingButtonStandard
- Button large
  - Horizontal: com.unblu.theme.button.horizontalPaddingButtonSmall
  - Vertical: com.unblu.theme.button.verticalPaddingButtonLarge
3. Icon button padding
- Button tiny
  - com.unblu.theme.button.paddingIconButtonTiny
- Button small
  - com.unblu.theme.button.paddingIconButtonTiny
- Button standard
  - com.unblu.theme.button.paddingIconButtonStandard
- Button large
  - com.unblu.theme.button.paddingIconButtonLarge
4. Font weight
- com.unblu.theme.button.fontWeight
5. Line height
- com.unblu.theme.button.lineHeight

Primary and secondary buttons

primary and secondary buttons

1. Primary button style
- Background states
- Border width
  - com.unblu.theme.button.primary.borderWidth
- Border states
- Foreground states
2. Secondary button style
- Background states
- Border width
  - com.unblu.theme.button.secondary.borderWidth
- Border states
- Foreground states
3. General
- Minimum button width (only applies to buttons for multiple choice questions)
  - com.unblu.conversation.messaging.ui.multiChoiceButtonMinWidth

Flat primary and secondary buttons

flat primary and secondary buttons

1. Flat primary button style
- Background states
- Border width
  - com.unblu.theme.button.flat.primary.borderWidth
- Border states
- Foreground states
2. Flat secondary button style
- Background states
- Border width
  - com.unblu.theme.button.flat.secondary.borderWidth
- Border states
- Foreground states

Flat inverse button

1. Flat inverse button style
- Background states
- Border width
  - com.unblu.theme.button.flat.inverse.borderWidth
- Border states
- Foreground states

Toggle button style

1. Toggle button style

Flat toggle button style

flat toogle buttons

1. Flat toggle button style

Info toasts

info toasts

Visitor theme

Launcher button

1. Launcher button
2. Launcher button notification badge
- Text color
  - com.unblu.siteintegration.ui.launcherButtonNotificationBadgeColorForeground
- Background color
  - com.unblu.siteintegration.ui.launcherButtonNotificationBadgeColorBackground

Engagement UI

conversation pannels

1. Action bar
- com.unblu.conversation.ui.individualUiActionBarTheme
2. Displayed logo
- 2a: com.unblu.visitor.ui.engagement.agentAvailableLogo
- 2b: com.unblu.visitor.ui.engagement.agentAwayLogo
3. Font
- com.unblu.visitor.ui.engagement.agentAvailableHeadingFont
4. Primary button
- Refer to Primary and secondary buttons
5. Secondary button
- Refer to Primary and secondary buttons
6. Online background color
- com.unblu.visitor.ui.engagement.agentAvailableBackground
7. Spacing
- com.unblu.siteintegration.ui.unbluUiContentSpacing
8. Offline background gradient color
- Top: com.unblu.visitor.ui.engagement.agentAwayBackgroundStart
- Bottom: com.unblu.visitor.ui.engagement.agentAwayBackgroundEnd
9. Flat secondary button
- Refer to Flat primary and secondary buttons

PIN entry panel

pin entry panel

1. PIN UI logo
- com.unblu.visitor.ui.pinentry.logo
2. Header text
- com.unblu.visitor.ui.engagement.agentAvailableHeadingFont
3. Input field style
- Background color
  - com.unblu.theme.input.backgroundColor
- Standard border color
  - com.unblu.theme.input.borderColor
- Focus border color
  - com.unblu.theme.input.borderColorFocus
- Error border color
  - com.unblu.theme.input.borderColorError
- Valid border color
  - com.unblu.theme.input.borderColorValid
- Radius
  - com.unblu.theme.input.borderRadius
- Padding
  - com.unblu.visitor.ui.pinentry.pinInputPadding
- Width
  - com.unblu.visitor.ui.pinentry.pinInputWidth
- Text
4. Body text
- com.unblu.visitor.ui.pinentry.bodyFont
- com.unblu.visitor.ui.engagement.agentAvailableBodyFont
5. PIN UI background
- com.unblu.visitor.ui.pinentry.backgroundColor

Conversation inbox and asset panels

conversation inbox assets panels

1. Conversation list background
- com.unblu.visitor.ui.conversationListBackgroundColor
2. Last unread message
- com.unblu.visitor.ui.conversationListColorUnread
- com.unblu.visitor.ui.conversationListLastMsgTextFont
3. Last read message
- com.unblu.visitor.ui.conversationListColorRead
4. Sender’s label style
- com.unblu.visitor.ui.conversationListLastMsgSenderFont
5. Last message time style
- com.unblu.visitor.ui.conversationListLastMsgTimeFont
6. Notification badge
- com.unblu.visitor.ui.conversationListNotificationBadgeBackgroundColor
- com.unblu.visitor.ui.conversationListNotificationBadgeForegroundColor
7. Title style
- com.unblu.visitor.ui.conversationListTitleFont
8. List item
- State
9. Divider
- com.unblu.theme.list.listItemDividerColor
10. Assets’ list background color
- com.unblu.conversation.file.fileListBackgroundColor

Chat conversation panel (1/3)

chat conversation panel 1

1. Unblu Concierge
- Documentation to change the Concierge avatar and its name can be found here: Concierge Person
2. Secondary button style
- Refer to Primary and secondary buttons
3. Primary button style
- Refer to #primary-and-secondary-buttons>>
4. Back button
- Configuration setting that determines if the visitor’s chat action bar will contain the back button (the back button allows the visitor to go back to the conversation overview):
- com.unblu.visitor.ui.pinentry.allowBack
5. Flat inverted button
- Refer to Flat inverse button

Chat conversation panel (2/3)

chat conversation panel 2

1. Chat background
- com.unblu.conversation.messaging.ui.colorChatBackground
2. System messages
- Background
  - com.unblu.conversation.messaging.ui.colorSystemMsgBackground
- Border
  - com.unblu.conversation.messaging.ui.colorSystemMsgBorder
- Text
  - com.unblu.conversation.messaging.ui.textColorSystemMsgBody
  - com.unblu.conversation.messaging.ui.textSizeSystemMsgBody
3. Typing indicator color
- com.unblu.conversation.messaging.ui.colorTypingIndicatorForeground
4. Message input
- Text
  - com.unblu.conversation.messaging.ui.textColorMessageInput
  - com.unblu.conversation.messaging.ui.textSizeMessageInput
- Behavior
  - com.unblu.conversation.messaging.ui.messageInputSendBehavior
- Icons
  - Please note that icons in the product are not configurable. Therefore, the “Send message” button cannot be changed.

Chat conversation panel (3/3)

chat conversation panel 3

1. Message header
- Header
  - com.unblu.conversation.messaging.ui.textColorMsgHeader
  - com.unblu.conversation.messaging.ui.textSizeMsgHeader
- Corner radius
  - com.unblu.conversation.messaging.ui.borderRadiusMsg
  - com.unblu.conversation.messaging.ui.borderRadiusMsgTip
2. My message
- Messages sent from by oneself.
- Background
  - com.unblu.conversation.messaging.ui.colorMyMsgBackground
- Border
  - com.unblu.conversation.messaging.ui.colorMyMsgBorder
- Text
  - com.unblu.conversation.messaging.ui.textColorMyMsgBody
  - com.unblu.conversation.messaging.ui.textSizeMyMsgBody
- State tick color
  - com.unblu.conversation.messaging.ui.colorMsgStateTick
3. Other message
- Messages sent by others in the conversation.
- Background
  - com.unblu.conversation.messaging.ui.colorOtherMsgBackground
  - com.unblu.conversation.messaging.ui.colorOtherMsgBorder
- Text
  - com.unblu.conversation.messaging.ui.textColorOtherMsgBody
  - com.unblu.conversation.messaging.ui.textSizeOtherMsgBody
4. Avatar position
- com.unblu.conversation.messaging.ui.groupAvatarPosition
5. Links
- com.unblu.theme.font.colorLink

Video chat conversation panel (1/2)

video chat conversation panel 1

1. Video call background
- com.unblu.conversation.call.colorCallBackground
2. Accept button color
- com.unblu.conversation.call.colorCallAcceptButton
3. Decline button color
- com.unblu.conversation.call.colorCallDeclineButton
4. Call action button style
5. Call type background
- com.unblu.conversation.call.colorCallTypeIconBackground

Video chat conversation panel (2/2)

video chat conversation panel 2

Visitor collaboration space (1/3)

visitor collaboration space 1

1. Loading splash screen
- Background
  - com.unblu.conversation.collabspace.colorLayerLoadingSplashBackground
- Time to load screen
  - com.unblu.conversation.collabspace.minLayerLoadingSplashDisplayTime
2. Loading splash screen icon
- com.unblu.conversation.collabspace.colorLayerLoadingSplashIconForeground
- com.unblu.conversation.collabspace.colorLayerLoadingSplashIconBackground
3. Loading splash screen text color
- com.unblu.conversation.collabspace.colorLayerLoadingSplashForeground
4. Loader color
- com.unblu.conversation.collabspace.colorLayerLoadingSplashLoader

Visitor collaboration space (2/3)

visitor collaboration space 2

Visitor collaboration space (3/3)

visitor collaboration space 3

1. Capturing frame
- Color
  - com.unblu.conversation.collabspace.colorVisitorCapturingFrame
- Width
  - com.unblu.conversation.collabspace.visitorCapturingFrameWidth
2. Click feedback animation
- com.unblu.core.client.player.ui.clickfeedback.ClickFeedbackAnimation.clickFeedbackColor
3. Secondary colormap
- Colors used for secondary elements such as avatars and virtual mouse cursor labels. These colors are chosen randomly from a set of colors determined in the following configuration key: com.unblu.theme.color.secondaryColorMap

Visitor mobile collaboration space

visitor mobile collaboration space

1. Visitor layer menu
- Refer to Visitor collaboration space (2/3)
2. Layer action button
- Refer to Agent Desk collaboration space (4/6)
3. Layer control toggle button

Agent UI theme

Agent Desk (1/2)

agent desk 1

1. Agent side navigation background
- com.unblu.nav.ui.navBarBackground
2. Active highlight
- com.unblu.nav.ui.activeHighlight
3. Agent side navigation button

Agent Desk (2/2)

agent desk 2

1. Top bar button
- Background states
- Border states
- Foreground
2. Flat primary button style
- Refer to Flat primary and secondary buttons
3. Icon background color
- Chat: com.unblu.queue.ui.chatIconBackground
- Audio call: com.unblu.queue.ui.audioCallIconBackground
- Co-Browsing: com.unblu.queue.ui.cobrowsingIconBackground
- Video call: com.unblu.queue.ui.videoCallIconBackground
4. Icon display
- Danger
  - com.unblu.queue.ui.showDangerTimeIcon
  - com.unblu.queue.ui.dangerTimeThresholdSeconds
- Warning
  - com.unblu.queue.ui.showWarnTimeIcon
  - com.unblu.queue.ui.warningTimeThresholdSeconds

Agent Desk collaboration space (1/6)

agent desk collaboration space 1

1. Collaboration layer button

Agent Desk collaboration space (2/6)

agent desk collaboration space 2

1. Menu button

Agent Desk collaboration space (3/6)

agent desk collaboration space 3

1. Menu item button
- Be aware that those configuration properties are also used for the user menu and can be used for other menus in the future.
- Background states
- Border width
  - com.unblu.theme.menuitem.borderWidth
- Border states
- Foreground states
2. Active layer indicator
- com.unblu.conversation.collabspace.colorLayerActiveIndicator

Agent Desk collaboration space (4/6)

agent desk collaboration space 4

Agent Desk collaboration space (5/6)

agent desk collaboration space 5

1. Maximize layer button

Agent Desk collaboration space (6/6)

agent desk collaboration space 6

1. Critical action button
- Background states
- Border width
  - com.unblu.theme.button.critical.borderWidth
- Border states
- Foreground
2. Flat inverse button
- Refer to Flat inverse button
3. Marker area color
- com.unblu.core.client.player.ui.marker.MarkerManager.markerColor

Agent Desk inbox

agent desk inbox

1. Conversation tab (top bar) style
- Background states
- Border width
  - com.unblu.tab.ui.link.borderActiveWidth
- Border states
- Foreground states
- Notification badge
  - com.unblu.ui.notificationbadge.notificationBadgeBackgroundColor
  - com.unblu.ui.notificationbadge.notificationBadgeForegroundColor

modal dialog

1. Modal dialog background color
- com.unblu.core.client.ui.dialog.ModalDialogHost.backdropColor
2. UI notification service
- Destination
- com.unblu.core.client.ui.notification.NotificationService.notificationDestination
- Alignment
  - Vertical: com.unblu.core.client.ui.notification.NotificationService.toastNotificationAlignmentY
  - Horizontal: com.unblu.core.client.ui.notification.NotificationService.toastNotificationAlignmentX
- Timeout
  - com.unblu.core.toaster.autoHideTimeout
- Maximum number
  - com.unblu.core.toaster.maxItemsShown

Agent Desk conversation history

agent desk conversation history

1. Select box
- Background states
- Border width
  - com.unblu.theme.select.borderWidth
- Border states
- Foreground
2. Bar color background
- com.unblu.theme.list.controlBarColorBackground
3. List items
- Background states
4. Secondary value
- com.unblu.theme.list.listItemValueSecondaryFont
5. Divider
- com.unblu.theme.list.listItemDividerColor

Account UI theme

account space side navigation

1. Agent side navigation background
- com.unblu.nav.ui.navBarBackground
2. Active highlight
- com.unblu.nav.ui.activeHighlight
3. Agent side navigation button
- Background states
- Border width
  - com.unblu.nav.ui.borderWidth
- Border radius
  - com.unblu.nav.ui.borderRadius
- Border states
- Foreground states

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 is possible to change the colors for all of the pages:

Universal co-browsing about page

This landing page can be used when a new "Websites" collaboration layer is opened. It is 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:

com.unblu.hbworker.aboutpage.pageTitle (shared with the document co-browsing)
com.unblu.hbworker.aboutpage.coBrowseTitle
com.unblu.hbworker.aboutpage.coBrowseDesc

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:

com.unblu.hbworker.aboutpage.pageTitle (shared with the universal-cobrowsing)
com.unblu.hbworker.aboutpage.shareDocTitle
com.unblu.hbworker.aboutpage.shareDocDesc

Error page

The error page is displayed when an error occurs:

error