Contact usRequest a demo

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 1. Modal dialogs in agent UIs

  1. Modal dialog background color

Notification toasts

Agent notification toasts
Figure 2. Agent notification toasts

  1. Notification toasts

Bot threads

Bot threads
Figure 3. Bot threads

  1. Bot thread line

  2. Bot thread status icon color

Quick replies

Quick replies with only the first five visible
Figure 4. 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 5. 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 6. 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 7. 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 8. Agent Desk conversation history

  1. Select box

  2. Bar color background

  3. List items

  4. Secondary value

  5. Divider