Overview
Agent Vue allows you to build agent-specific micro-dashboards that can be added to an existing “Dashboard.” Each Agent Vue displays real-time, agent-level data, such as queue assignments, interaction counts, talk time, and current status, in a fully configurable grid layout.
Building an Agent Vue is similar to building a “Dashboard,” with one key difference: instead of dropping reports and charts into a grid, you populate containers with agent-specific data fields.
Accessing Agent Vue
Click the Agent Vue icon in the side navigation panel to open the Agent Vue home screen. From here, existing Agent Vues can be edited, duplicated, or deleted.
To create a new Agent Vue, click the New Vue button in the upper-right corner.
The Vue Builder Interface
The Vue Builder uses four configuration tabs in the side panel: Vue Options, Active Containers, Filters, and Sort.
Vue Options
The Vue Options tab controls the overall appearance and behavior of the Agent Vue template. It has three sections: View, Master Vue, and Vue Animation.
View
The Template / Agents toggle switches between two display modes within the Vue Builder:
Template view — Shows the grid and containers populated with field names rather than real data. Use this when laying out and configuring the Vue.
Agents view — Shows the grid and containers with live agent data. Use this to preview how the Vue will look in practice.
Both views can be enabled simultaneously.
Master Vue
The Master Vue section controls the Vue's overall layout and visual settings:
Setting |
Description |
|---|---|
|
Display Format |
Grid arranges Vues in rows and columns; List stacks them in a single vertical column. |
|
Is Responsive? |
Available in List view only. When enabled, the Vue automatically resizes to use available space. |
|
Width and Height |
Adjust manually by entering values in the fields, or drag the handle at the bottom-right corner of the Vue template. |
|
Margin |
Controls the spacing between individual agent Vues. |
|
Border Width |
Controls the thickness of the Vue's outer border. |
|
Border Radius |
Rounds the corners of the Vue's outer border. |
|
Border Color |
Sets the color of the Vue's outer border via a color picker. |
Vue Animation
Animation adds a dynamic visual element, particularly useful when a Vue is displayed on a wall monitor or broadcast screen. To configure animation, enable the toggle, then select the following:
A status or condition to trigger the animation, such as Active, On-Call, Ringing, or Wrap Up.
An animation style, such as bounce, flash, or pulse.
Active Containers
The Active Containers tab controls the content and appearance of individual containers within the Vue template. Containers can be modified one at a time or in bulk by selecting multiple at once.
Content
Each container displays either a data field or static text.
Field — Select a field from the drop-down to display its live value in the container. Adding a prefix or suffix helps provide context for fields whose values could be ambiguous. For example, a time value like 00:03:13 could represent several different metrics; a prefix such as Avg Hold or a suffix such as sec makes the meaning immediately clear.
Static Text — Replaces the field drop-down with a free-text input. Static text is useful for labeling or organizing a Vue. It can also be used with conditional formatting to display a default message, such as Not Currently On An Interaction, that is overridden when a specific condition is met.
Container
This section controls the visual properties of individual containers:
Background color — Set via the color picker.
Border color — Set via the color picker.
Border width — Adjust with the slider.
Font
Controls text formatting within the container: size, color, bold, italic, and alignment (left, center, or right). The padding setting controls the space between the text and the container's edges; more padding creates more breathing room around the content.
Conditional Formatting and Removing Containers
Two buttons appear at the bottom of the Active Containers tab:
Conditional Formatting — Opens the conditional formatting interface for the selected container(s).
Remove — Deletes the selected container(s) from the Vue template.
Filters
Filters control which agents are included in the Vue at any given time. Common uses include showing agents assigned to a specific queue or team or agents in a particular status such as Available or On Interaction.
Filters in Agent Vue work the same way they do throughout Insights reports and charts.
Sort
The Sort tab controls the order in which agent Vues are displayed. Common options include sorting by Last Status Change to surface the most recent queue activity or by Agent Name to alphabetize Vues for easier scanning.
Sorting in Agent Vue works the same way as sorting throughout the rest of Insights.