/
Building an Agent Vue

Building an Agent Vue

Overview

This article walks through building an Agent Vue from scratch. The example produces a micro-dashboard that displays each agent's avatar, name, logged-in queues, interaction count, average talk time, and last call time.

Creating a New Agent Vue

  1. Open Agent Vue from the Insights side navigation panel.

  2. Click New Vue.

  3. Enter a name, for this example: Support Q Vue.

  4. Click Create.

The Vue Builder interface will open, displaying a blank grid on the left and configuration options on the right.

Adding and Populating Containers

Containers are the building blocks of an Agent Vue. Each container holds a single data field or a piece of static text.

Adding a Container

Click Add Container. The new container will appear in the top-left corner of the grid by default and will display as Empty until a field or static text is added.

A green dot in the container's top-right corner indicates it is Active, meaning any changes made in the Active Containers tab will apply to it.

Tip: Hold Shift and click to select multiple containers at once. Be mindful of what is active before making changes, as edits apply to all active containers simultaneously.

Moving and Resizing a Container

Hover over a container to reveal two handles:

  • Drag handle (top-left corner) — Move the container to a different position in the grid.

  • Resize handle (bottom-right corner) — Drag to change the container's dimensions.

Populating a Container

With the container active, open the Active Containers tab and choose how to populate it:

  • Field — Select a data field from the drop-down. The container will display live agent data for that field.

  • Static Text — Enter fixed text to display in the container regardless of agent data.

Example: Building the Support Q Vue

The following containers make up this example Vue, built in order:

1. Avatar

Select Field and choose Avatar from the drop-down. The container will display each agent's profile picture.

2. Full Name

Add a second container and select Full Name from the field drop-down. Resize the container into a horizontal rectangle to better accommodate a first and last name. Increase the font size and enable Bold for legibility.

3. Logged In Q Names

Displays the queues each agent is currently logged into, giving visibility into agent availability.

4. Today's Interaction Count

Displays the number of interactions the agent has handled today. Add a suffix such as Today (with a leading space) so the value displays as 2 Today rather than just 2.

5. Average Talk Time

Displays the agent's average talk time. Add a prefix such as Talk (Avg): (with a trailing space) so the value displays as Talk (Avg): 00:05:59 rather than an unlabeled time value.

6. Last Call Time

Displays when the agent last handled an interaction. Add a prefix such as Last: for context. Time-based fields like Last Call Time offer three display format options:

Format

Output

Format

Output

Date

Displays the exact date and time — for example, 2019-02-05 08:57:55

Time Ago

Displays an approximate elapsed time — for example, 3 minutes ago or 2 days ago

Counter

Displays a live running counter since the last event — for example, 00:04:32

Using Prefixes and Suffixes

Prefixes and suffixes add context to a container's value, preventing misinterpretation — especially for time-based fields where a number alone could represent several different metrics.

  • A prefix appears before the value. Always add a trailing space to separate it from the value — for example, Talk (Avg): rather than Talk (Avg):.

  • A suffix appears after the value. Always add a leading space to separate it from the value — for example, Today rather than Today.

Using Static Text

To display fixed text in a container instead of a data field, select Static Text and type the desired content.

A common use case is combining static text with conditional formatting. For example, a container could display Not Currently On An Interaction by default, and use conditional formatting with an override to replace that text with live interaction details when the agent is active.

Font options, such as smaller text size and italics, can help visually distinguish static text containers from data field containers.

Example:

Related Articles