Unblu UI customization guide

The Queue entry in the sidebar menu is displayed if com.unblu.core.client.desk.showQueue is true. When selected, it opens the queue view.

The requests in the queue are displayed in the order they were added to the queue, with the oldest request at the top. You can highlight that requests have been waiting more than a certain period by setting a warning and a danger threshold with the configuration properties com.unblu.queue.ui.warningTimeThresholdSeconds and com.unblu.queue.ui.dangerTimeThresholdSeconds, respectively.

Configuring the queue is discussed in depth in a separate article, The queue and manual and automatic request dispatching. The article also points out how your configuration will affect the queue in the Agent Desk.

The Inbox menu entry is displayed if com.unblu.core.client.desk.showInbox is true. When selected, it opens the inbox with the user’s ongoing conversations.

To make it easier for agents to distinguish between conversations where they are the assigned agent and ones where they are only secondary agents, Unblu displays these conversations in two separate tabs in the inbox:

You can configure Unblu to display all conversations in single list by setting the configuration property com.unblu.agent.inbox.ui.displayOwnAndSecondaryConversationsInTabs to false. The inbox then looks like this:

Conversations in the inbox are listed in order of the time of the last message sent to the conversation. You can choose to list conversations in ascending or descending order with the configuration property com.unblu.core.client.agent.inbox.InboxUiConfig. By default, they’re listed in descending order.

The Conversation history menu entry is displayed if com.unblu.core.client.desk.showConversationHistory is true.

The only configurable option in the conversation history is the number of conversations that it should show. Set com.unblu.conversationhistory.limit to the maximum number of conversations to display in the conversation history.

There is no pagination in the conversation history. If more conversations match the criteria specified in the filter, Unblu will simply display a message to this effect. You can then adapt your search criteria to further limit the number of search results.

The Agent monitor entry in the sidebar menu is displayed if com.unblu.availabilitymonitor.showAvailabilityMonitorActionEnabled is true and the user who is logged in has at least the user role SUPERVISOR.

The forwarding menu can be used by authorized users to forward the current conversation to a different agent, a team, or a named area. Which participants may forward conversations to whom is determined by three configuration properties:

The participation role of the person logged in to the Agent Desk determines the content of the forwarding menu.

The invitation menu works similarly to the forwarding menu. It allows authorized users to invite agents, teams, or visitors to join the current conversation.

Which participants may invite which types of participant to join a conversation is again specified in three configuration properties:

The number of permissions the Agent Desk user has affects the behavior of the menu in the same way as the forwarding menu.

The conversation configuration button is present in the conversation action bar if the user logged in to the Agent Desk is an admin or superadmin. When clicked, it opens the settings of the conversation in question and allows the user to make changes to the settings of a single conversation, just as they would to those of a conversation template.

The Collaborate menu is used to launch a new collaboration layer.

Its content depends on the types of collaboration layer that can be launched within the context of the running conversation.

Only participant types listed in com.unblu.conversation.collaboration.showLayerControls will see the layer controls. Additionally, com.unblu.conversation.collaboration.action.displayInactiveLayers determines which types of participant see inactive collaboration layers in the menu.

Each conversation template can be configured individually to allow various types of collaboration:

You can only enable features for a conversation that have been enabled for the relevant Unblu account. If one of the configuration properties mentioned above is not available in the settings of the conversation template, check the corresponding account-level property:

Setting com.unblu.conversation.ui.showLeaveInAgentControlBar to true will add a button to the conversation action bar allowing the user to leave a conversation. The Leave conversation button is only displayed if the Agent Desk user has a participation role in the conversation that is allowed to leave a conversation. This is determined by com.unblu.conversation.lifecycle.allowLeave, which you can set in the conversation template. You can change the label of the button in the text property com.unblu.agent.conversation.ui.dialogButtonLeaveConversationLeave.

Without the button, authorized users can only leave conversations if you have set com.unblu.conversation.actionbar.ui.leaveConversationActionDisplayMode such that there is a possibility to leave the conversation displayed somewhere in the action bar.

The End conversation button is displayed for all of a conversation’s participants allowed to end the conversation. Who may do so is specified in conversation template’s configuration property com.unblu.conversation.lifecycle.allowEnd. The label of the button is specified by com.unblu.agent.conversation.ui.btnEndConversation.

To show a confirmation dialog when a participant ends the conversation, include their participant type in com.unblu.conversation.ui.showEndConversationConfirmationDialog.

You can specify the collaboration layers that conversation participants can switch to with the following configuration properties:

The values the configuration properties listed above can take are:

The relevant feature must be enabled for the settings to have an effect; see the section on the collaborate menu above.

Which participants will see the respective icon in their action bar or an entry in the overflow menu depends on two more settings:

The possibility to launch calls is configured the same way as with collaboration layers:

Both options are only available if com.unblu.messenger.callEnabled is true.

There are a number of other actions that can be added to the action bar or the overflow menu:

All of the configuration properties listed above affect the action bar in both the Agent Desk and the Visitor Individual UI. One setting is only relevant in the Agent Desk, com.unblu.conversation.actionbar.ui.changeVisibilityActionDisplayMode. It provides secondary agents with a means to change their visibility to other participants in a conversation. The setting will only have an effect if com.unblu.conversation.lifecycle.allowSecondaryAgentsToChangeVisibility is true.

Many of the possibilities for customizing the action bar were already discussed above. This section focuses on those parts of the action bar that are only present in the Visitor Individual UI but not the Agent Desk.

The conversation list is displayed once a user has at least one ongoing conversation. It lists all ongoing conversations, but can be configured to include ended conversations.

To display ended conversations, set com.unblu.visitorsession.showEndedConversations to true. Ended conversations that meet the following requirements will be displayed:

You can change these requirements with the following configuration properties:

The engagement UI is the screen of the Visitor Individual UI that visitors use to start a conversation with your organization. It can be configured in various scopes:

You can specify the types of engagement visitors are able to initiate with the following configuration properties:

To add the controls that allow visitors to start conversations with the various engagement types from the visitor UI welcome screen, you need to set the configuration property from the list below that corresponds with the engagement type in question to true:

These configuration properties will only be available in the Account Configuration interface if the corresponding startWith*Enabled configuration property is true. For example, com.unblu.visitor.ui.engagement.showAudioCallEngagementOption will not be available unless com.unblu.cobrowsing.startWithAudioCallOptionEnabled is true.

You must also enable the feature in general for the configuration properties above to have an effect. Enabling, say, embedded co-browsing on the engagement UI will not have an effect unless embedded co-browsing is enabled for the Unblu account in question.

You must also enable the feature in general for the configuration properties above to have an effect. Enabling, say, embedded co-browsing on the engagement UI will not have an effect unless embedded co-browsing is enabled for the Unblu account in question.

The options to launch a chat, video call, and a voice call are displayed as buttons. By default, the chat button uses the primary button style. The buttons for video and voice buttons use the secondary button style. You can change this with the appropriate configuration property listed below:

All other options are displayed as links.

Customizing the list of messages is discussed above.