Building a New Agent Vue (Example)

In this article, the following Agent Vue will be constructed:

Open

Create a new Vue (Support Q Vue)

After accessing Agent Vue from the Insights side bar, click the New Vue button to create a new Agent Vue. 

Open

After naming the Agent Vue, click Create to get started.

On clicking Create, we're taken to the Vue Builder interface, shown below:

Adding the first container

Click the Add Container button. The new container will, by default, appear in the top-left corner of the grid. 

It will display as Empty until we add a field or some text. Note the green dot in the top-right corner of the container. This indicates that the container is Active. Note that by holding the shift key, you can click on multiple containers—just be careful what changes are made with multiple containers active. Be mindful of whether you have one or multiple containers active when making changes.

Hovering over the container reveals a draggable handle (in the container's top-left corner) to move the container around within the grid and a resize handle (in the container's bottom-right corner). 

Populating the container

To do this:

(1) Make sure Field is selected, rather than Static Text. 

(2) From the Field drop-down, select Avatar. You should see the word Empty change to the word Avatar in the template. If we view both Template and  Agents view, we can preview how the field's data appears—you should see agents' pictures.

Adding a second container

As we did with the first (Avatar) container, we can add a second with the Add Container button. Again, the container will, by default, appear to the right of the previous/last container, and be a square.

With the container active, I'm going to populate this second container with the agent's Full Name.

Reshaping the container

Use the draggable handle to resize the container.

Customizing font options

With our container appropriately resized (into a horizontal rectangle, since it will display agents' first and last name.

Adding additional containers

To "fast-forward" this process and work toward completing the Agent Vue previewed at the top of this article, the next four containers that are being added are:

• Logged In Q Names, to see each agent's availability

• Today's Interaction Count, to understand each agent's interaction volume

• Average Talk Time, to better understand the customer's experience (as well as agent efficiency)

• Last Call Time, to know how long it has been since each agent has taken an interaction

Prefixes and suffixes

Sometimes when we populate a container with a field, the data needs context. This is especially true for time-based fields, for example.

Applying a prefix

When Average Talk Time is added to a container, all we see is the data (e.g., 00:05:59). That number could cause confusion—especially if added to a dashboard for others to see.

This is where Prefixes and Suffixes are especially handy.

With no prefix or suffix, here's what the Average Talk Time container looks like:

It's not clear at all what 00:28:25 represents in this case.

Adding a prefix of "Talk (Avg):"

Applying a suffix

Adding a suffix works exactly like adding a prefix. Without a prefix or suffix, the Today's Interaction Count field simply displays as:

A suffix here will give the data context. Just like prefixes need a space manually entered at the end, a space should precede a suffix (to output "2 Today" rather than "2Today").

Date, Time Ago, Counter

Certain time-based fields—like Last Call Time—will present additional customization options,. fields. In this case, we have three choices regarding how we want to see Last Call Time:

• Choosing Date will display the precise date and time of the last interaction (e.g., 2019-02-05 08:57:55).

• Choosing Time Ago will display an approximate time (e.g., 3 minutes ago, 2 days ago, etc.).

• Choosing Counter will display a live counter (e.g., 00:04:32) since something happened.

See what each of these looks like below:

Static text

Sometimes it makes sense to fill a container with static text rather than a selected field. This can be especially useful in the context of conditional formatting with override.

Here's what it looks like to include static text—in this case, to display the words Not Currently On An Interaction (when an agent isn't on an interaction)—which can then use override functionality to replace the text with interaction-specific details when the agent is actively handling an active interaction.

Here's the final output for this Agent Vue: