UI customization guide

The Queue entry in the sidebar menu is displayed if com.unblu.desk.ui.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, Queue and request dispatching configuration. The article also points out how your configuration affects the queue in the Agent Desk.

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

Depending on how Unblu is configured, the conversations may be grouped in three tabs, My Conversations, Secondary Conversations, and Forwarded. This makes it easier for agents to distinguish between conversations where they’re the assigned agent, ones where they’re only secondary agents, and conversations that they have forwarded to another agent.

You can configure Unblu to display all conversations in a 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.desk.ui.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 config: com.unblu.desk.ui.showAgentAvailabilityMonitor[] is true and the user who is logged in has at least the user role SUPERVISOR.

The Forward button 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 forward button menu.

The Invite button works similarly to the Forward button. 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 button in the same way as the Forward button.

If public links are enabled for the conversation in question, the public link to the conversation is also displayed in the modal page.

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 isn’t available in the settings of the conversation template, check the corresponding account-level property:

Setting com.unblu.conversation.ui.showLeaveInAgentControlBar to true adds 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’s 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 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 defined in 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:

There are similar configuration properties for all other predefined actions that can appear in the action bar.

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.

The sort order of predefined actions in the action bar is defined by configuration properties whose names follow the pattern com.unblu.conversation.actionbar.ui.<actionName>ActionSortOrder. The sort order of custom actions is defined on the custom actions themselves.

Which participants see the respective action’s 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.

The actions' sort order is defined by com.unblu.conversation.actionbar.ui.videoCallActionSortOrder and com.unblu.conversation.actionbar.ui.voiceCallActionSortOrder, respsectively.

When you click on a participant’s avatar in the action bar, a popup appears displaying various information about the participant.

The About section of the popup shows the following information:

The popup shows device-related information for each device the user is currently accessing the conversation with. This means that there can be multiple entries for both the operating system and browser as well as the language. Because of the method for determining a user’s location, there may even be multiple entries for their location.

By default, assigned agents, secondary agents, and ghost participants have access to the information listed above. To change which conversation participants have such access, modify the configuration property com.unblu.conversation.ui.showPersonDetails.

The popup that appears when you click a user’s avatar may include other buttons:

The Collaboration options section beneath the About section lists all the ongoing collaboration sessions in the conversation.

The Actions section beneath the Collaboration options section lists all predefined and custom actions that can be invoked on the user. The sort order of the predefined actions is defined with com.unblu.conversation.actionbar.ui.changeParticipationVisibilityActionSortOrder and com.unblu.conversation.actionbar.ui.changeAssigneeActionSortOrder. The sort order of custom actions is defined on the custom actions themselves.

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

All the configuration properties listed above affect the action bar in both the Agent Desk and the Floating Visitor 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 only has 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 Floating Visitor UI but not the Agent Desk.

For the call UI action bar, there’s one configuration property that’s only in the Floating Visitor UI:

Apart from that, the configuration properties used to configure the call UI action bar in the Agent Desk, described above, also affect the call UI action bar in the Floating Visitor UI.

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, too.

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

You can change these requirements with the following configuration properties:

By default, active and ended conversations appear in a single list. To display them in separate lists, set com.unblu.visitor.ui.endedConversationsDisplayMode to IN_ARCHIVE. This adds two toggle buttons to the UI that allow visitors to switch between the lists of active and ended conversations.

The buttons use the flat toggle button style, but you can customize their appearance, including their width and the gap between them, with the configuration properties starting with com.unblu.visitor.conversationlist.toggle.*.

The labels of the two buttons are defined in the text properties com.unblu.visitor.ui.activeConversationsFilterButtonLabel and com.unblu.visitor.ui.endedConversationsFilterButtonLabel, respectively.

Each entry in the conversation list has the following elements:

The contents of the primary and secondary titles are determined as follows:

You can configure the format to display an assigned agent’s name in. See com.unblu.person.displayname.agentDisplayNameEvaluationOrder for further details.

For conversation recipients, you can choose whether to display their name or a static name for that type of recipient with the following properties:

You can specifiy the static name for each type of recipient in the following text properties:

The engagement UI is the screen of the Floating Visitor 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 are only available in the Account Configuration interface if the corresponding *.startWith*Enabled configuration property is true. For example, com.unblu.visitor.ui.engagement.showAudioCallEngagementOption isn’t available unless com.unblu.messenger.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 doesn’t have an effect unless embedded co-browsing is enabled for the Unblu account in question.

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

All other options are displayed as links.

With the configuration property com.unblu.conversation.message.allowSeeTypingIndicator, you can specify which participant types see the typing indicator when another participant is entering a text message. This property is available in the conversation and conversation template scopes.

Customizing the list of messages is discussed above.