Building an Agent Vue with Conditional Formatting

This article will detail how to create an Agent Vue that makes use of Conditional Formatting options.

Here’s the Agent Vue that was built in the Building an Agent Vue article:

Open

This Agent Vue contains the agent's Avatar, Full Name, Today's Interaction Count, Last Call Time, Logged In Q Names, Average Talk Time, and static text (Not Currently On An Interaction)

Utilizing conditional formatting will make it easier to understand, at a glance, not only who is actively handling an interaction but also some pertinent, real-time data related to the interaction.

In the screenshot below, note the bottom-right corner of each Agent Vue, for example: it shows that Briton and James are on interactions (with Garden Solutions and Thaddeus Jones, respectively); Allie, Jake, and Brent are not currently on an interaction.

Open

Elements of conditional formatting at play in this Agent Vue that will be covered in this article:

[1] A change in color (applies to all containers): the entire Vue has a green background when the agent's on an interaction, and is light blue when the agent is not. 

[2] The bottom-right corner container utilizes override functionality. By default, it displays the Not Currently On An Interaction static text, but when the agent is on an interaction, the static text field is replaced with a data field (specifically, Company Name). The container in the upper-right corner will utilize override as well. It's configured to show Last Call Time by default (using the Time Ago format). When an agent is on an interaction, then, the Vue will instead display Answer Time—formatted as a Counter.

[3] Vue Animation will be configured so that an agent's Vue wobbles when he/she is ringing.

Basic conditional formatting

Using conditional formatting to change the Vue's containers' color(s)

To make all containers of this Agent Vue turn green when the agent is actively handling an interaction:

First, hold the SHIFT key (to select multiple containers) and click on each container. When all containers are selected, you should see a green dot in the upper-right corner of each:   

With all containers selected, any changes made will impact all of these containers.

Next, click the Conditional Formatting button (at the bottom of the Active Containers tab). 

This will open a Conditional Formatting pop-out window, as shown below:

There are three main areas on this screen.

(1) Conditions, where precise criteria can be set in order to trigger conditional formatting options into effect

(2) Formatting, where the specific changes are configured

(3) Preview, which provides a quick look at how the options will appear once put in place (and triggered).

Conditions

The intention behind setting up conditional formatting for this Vue is to see a dynamic change when an agent is actively handling an interaction.

Conditions need to be set, then, that constitute being actively handling an interaction. This scenario relates to Support Q agents who are primarily dealing with chats and inbound calls.

Adding the first condition

Click the [ + ] at the top of the Conditions pane. Setting conditions works similarly to adding filters to a report or chart.

Let's start with the first condition, where Interaction Type is equal to chat.

Formatting

Once a condition is set in the left-most panel—and ensuring that the condition is checked (note the small checkbox in the screenshot above, just to the right of the drop-down where "equal to" has been selected), several options appear on-screen:

Here's a closer look at the Formatting panel:

This panel consists of three main sections: (1) Container, (2) Font, and (3) Override. The configuration shown in the Container and Font sections of the panel are the default values the Agent Vue is using:

Container: background color, border width, and border color

Font: size, color, format (bold/italic), alignment (left, center, right), and horizontal/vertical padding.

Container options

Here's where the color change (to impact all containers) can be set. 

First, click on the background color square. This will open the color picker, from which a different color can be set.

Then, the same can be done for the border color square.

Font options

Since one container (Full Name) has a different font style (larger, bold) than the others, it would be important to de-select that container before configuring new font settings. For now, the font can just be left alone.

Adding a second condition

This Agent Vue was built to surface data relevant to support chats and calls. Since the first condition set was for Interaction Type equal to chat, simply repeat the process to create the same formatting rules for the inboundCall Interaction Type.

Preview

Now that formatting preferences have been set for each of the defined conditions, it's time to preview how the Vue will appear when an agent is on a chat or call. 

The preview gives us a chance to fine-tune the settings/options before applying them to the Vue. 

You can use the blue eye icon (in the upper-right corner of the Formatting section) to toggle back and forth between the original content/formatting and the conditional formatting as it's built out.

Conditional formatting with override (1 of 2)

Using conditional formatting to override static text (Not Currently On An Interaction) with active interaction-related data (Company Name).

Override options

Using conditional formatting to override static text (Not Currently On An Interaction) with active interaction-related data (Company Name).

Next, we're going to set some Override conditions, in order to change the content of a pair of containers.

We're looking to replace the Last Call Time (Time Ago) field with the active interaction's Talk Time (Answer Time > Counter), and to replace the static Not Currently On An Interaction with information about the current interaction (Company Name).

Overriding Last Call Time with Answer Time (Time Ago counter)

Override allows us to not only change a container's appearance, but the content (data field, or text) as well.

First, click on the Last Call Time container (top right), and ensure that it's the only Active container.

Then, click the Conditional Formatting button again (in the Active Containers tab of the side configuration panel).

Here, when the agent is on an interaction, we want the container to display the current interaction's talk time (rather than the time since the agent's last interaction concluded).

We can simply choose a new field from the drop-down—in this case, we'll use Answer Time (and then choose the Counter format).

Again, I want to set the same exact Override settings to the second condition (agent on a call), and then click Apply.

Overriding Not Currently On An Interaction (static text) with the Company Name field

There's one more container to apply conditional formatting to. Rather than displaying the Not Currently On An Interaction static text, let's use that container for the Company Name on the other end of the chat/call.

This is shown below:

Vue Animation

Adding Vue Animation to this example allows us to set a specific condition (or trigger action) and pair it with a type of animation. 

To configure this Vue Animation:

Flip the Animate on switch at the bottom of the Vue Options tab within the side configuration panel.

Once the switch is flipped, two drop-downs appear, where a specific Agent Status (e.g., Offline, Active, On Call, Messaging) and animation type (e.g., bounce, wobble, shake) can be set.

The gif above shows what these settings would look like. 

We see which agents are on an interaction (Matt is, as his entire Vue has turned green) as well as which agent is actively ringing (Jake). 

Once Jake answers the interaction, his Vue will turn green (like Matt's).

Or, if the customer abandons before Jake answers, his Vue will simply stop wobbling.

Adding Agent Vue to a Dashboard

Just like individual reports and charts, Agent Vue can be incorporated into a Dashboard as well. The process for adding it is just the same as adding a report or chart. 

First, open a dashboard.

Then, place a container on the grid (for Agent Vue to display well, a large container is recommended.

Then, select the Agent Vue from the available options.

Finally, here’s what Agent Vue could look like added to a Dashboard with some additional charts: