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

Figure 1. Launcher button and notification badge

Launcher button
- Display mode
  - com.unblu.siteintegration.ui.launcherButtonDisplayMode
  - com.unblu.siteintegration.ui.launcherButtonHideWhenOpen
- Style: com.unblu.siteintegration.ui.launcherButtonStyle
- Button labels and tooltips
  
  The button label text for the launcher button depends on the button’s state. If the launcher button style is set to ICON, the label text is displayed as a tooltip, provided tooltips are enabled for the launcher button.
  com.unblu.siteintegration.ui.launcherButtonOpenState
  
  com.unblu.siteintegration.ui.launcherButtonOpenActiveState
  
  com.unblu.siteintegration.ui.launcherButtonClosedState
  
  com.unblu.siteintegration.ui.launcherButtonClosedActiveState
  
  com.unblu.siteintegration.ui.launcherButtonPoppedOutState
  
  com.unblu.siteintegration.ui.launcherButtonPoppedOutActiveState
  com.unblu.siteintegration.ui.launcherButtonTooltipBorderRadius
  
  com.unblu.siteintegration.ui.launcherButtonTooltipColorForeground
  
  com.unblu.siteintegration.ui.launcherButtonTooltipColorBorder
  
  com.unblu.siteintegration.ui.launcherButtonTooltipColorBackground
- Padding: com.unblu.siteintegration.ui.launcherButtonPadding
- Icon
  - com.unblu.siteintegration.ui.launcherButtonOpenIcon
  - com.unblu.siteintegration.ui.launcherButtonClosedIcon
    
    This configuration property only affects the icon when the Floating Visitor UI is closed. You can only use the icons provided; you can’t add icons of your own.
- Size: com.unblu.siteintegration.ui.launcherButtonIconSize
- States
- Border
- Text
Launcher button notification badge
- Text color: com.unblu.siteintegration.ui.launcherButtonNotificationBadgeColorForeground
- Background color: com.unblu.siteintegration.ui.launcherButtonNotificationBadgeColorBackground

Engagement UI

Figure 2. Visitor online and offline conversation panels

Action bar
Displayed logo
1. com.unblu.visitor.ui.engagement.agentAvailableLogo
2. com.unblu.visitor.ui.engagement.agentAwayLogo
Font
Primary button

Refer to Primary and secondary buttons
Secondary button

Refer to Primary and secondary buttons
Online background color
- com.unblu.visitor.ui.engagement.agentAvailableBackground
Offline background gradient color
- com.unblu.visitor.ui.engagement.agentAwayBackgroundAngle
- com.unblu.visitor.ui.engagement.agentAwayBackgroundColors
Spacing
- com.unblu.siteintegration.ui.unbluUiContentSpacing
Flat secondary button

Refer to Flat primary and secondary buttons.

PIN entry panel

Figure 3. PIN entry panel

PIN UI logo
- com.unblu.visitor.ui.pinentry.logo
Header text
- com.unblu.visitor.ui.engagement.agentAvailableHeadingFont
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
Body text
- com.unblu.visitor.ui.pinentry.bodyFont
- com.unblu.visitor.ui.engagement.agentAvailableBodyFont
PIN UI background
- com.unblu.visitor.ui.pinentry.backgroundColor

Other
- com.unblu.visitor.ui.pinentry.allowBack determines whether the action bar of the PIN entry panel should contain the back button .

Conversation inbox and file panels

Figure 4. Conversation inbox and file panels

Conversation list background
- com.unblu.visitor.ui.conversationListBackgroundColor
Last unread message
- com.unblu.visitor.ui.conversationListColorUnread
- com.unblu.visitor.ui.conversationListLastMsgTextFont
Last read message
- com.unblu.visitor.ui.conversationListColorRead
Sender’s label style
- com.unblu.visitor.ui.conversationListLastMsgSenderFont
Last message time style
- com.unblu.visitor.ui.conversationListLastMsgTimeFont
Notification badge
- com.unblu.visitor.ui.conversationListNotificationBadgeBackgroundColor
- com.unblu.visitor.ui.conversationListNotificationBadgeForegroundColor
Title style
- com.unblu.visitor.ui.conversationListTitleFont
List item state
- Active list item
  - com.unblu.visitor.ui.conversationListActiveItemBackgroundColor
- Other list items
Divider
- com.unblu.theme.list.listItemDividerColor
File list background color
- com.unblu.conversation.file.fileListBackgroundColor

Collaboration space

Splash screen

Figure 5. Visitor collaboration space splash screen

Loading splash screen
- Background: com.unblu.conversation.collabspace.colorLayerLoadingSplashBackground
Loading splash screen icon
- com.unblu.conversation.collabspace.colorLayerLoadingSplashIconForeground
- com.unblu.conversation.collabspace.colorLayerLoadingSplashIconBackground
Loading splash screen text color
- com.unblu.conversation.collabspace.colorLayerLoadingSplashForeground
Loader color
- com.unblu.conversation.collabspace.colorLayerLoadingSplashLoader

Collaboration space control bar

Figure 6. Visitor collaboration space control bar

Other collaboration space UI elements

Figure 7. Visitor collaboration space, other UI elements

Capturing frame
- Color: com.unblu.conversation.collabspace.colorVisitorCapturingFrame
- Width: com.unblu.conversation.collabspace.visitorCapturingFrameWidth
Click feedback animation
- com.unblu.core.client.player.ui.clickfeedback.ClickFeedbackAnimation.clickFeedbackColor
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

Figure 8. Visitor mobile collaboration space

Visitor layer menu

Refer to Collaboration space control bar.
Layer control toggle button