Unblu indicators

When Unblu is integrated in an app, it typically has a certain location in the app’s navigation, or is displayed modally on the screen as needed. In some situations—during calls or mobile co-browsing sessions, for example—it’s important that users can navigate through your app, yet still have a way of quickly returning to the Unblu UI. To that end, you can display indicators while users are navigating your app, showing that there’s an ongoing Unblu conversation or call.

There are two types of indicator:

Active conversation indicators that display an user’s avatar
Active call indicators with Picture in Picture (PiP)

Active conversation indicator

The active conversation indicator is a draggable floating button that’s displayed while a conversation is active. It appears above the other views when the Unblu view is hidden for any reason. When pressed, it takes the user to the active conversation.

By default, the indicator displays the profile picture of an agent.

Figure 1. Default active conversation indicator displaying the agent’s avatar

You can also set a custom icon instead. The name of the icon corresponds to the image in the app assets.

Listing 1. Adding a custom icon for the active conversation indicator

let unbluVisitorClient = Unblu.createVisitorClient(withConfiguration: config)
unbluVisitorClient.activeConversationIndicatorIconName = "YourIcon" (1)

1	Replace `"YourIcon"` with the appropriate value.

By default, when dragging the indicator, the removal area appears. Users can drop the indicator here to close the conversation.

Figure 2. Removal area when dragging the active conversation indicator

The removal area is optional. You can disable it with the following code:

Listing 2. Disabling the removal area

let unbluVisitorClient = Unblu.createVisitorClient(withConfiguration: config)
unbluVisitorClient.indicatorsHaveRemovalArea = false

The indicator can be moved off-screen. When it’s off-screen, a bookmark becomes visible. Clicking the bookmark or dragging it displays the indicator.

Figure 3. Active conversation indicator, moved off-screen

The active conversation indicator is enabled by default. To disable it use the following method:

Listing 3. Disabling the active conversation indicator

let  unbluCoreApi = UnbluCoreApi(apiType: type, configuration: config, unbluNotificationApi: .instance)
unbluCoreApi.setEnabledFloatingActiveConversationIndicator(false)

Active call indicator with Picture in Picture (PiP)

The active call indicator works like the standard PiP feature, but within your app. (Outside the app, Unblu uses the standard PiP feature.) It appears automatically when the Unblu call UI is hidden during a call and can’t be disabled.

Figure 4. Incoming Unblu call displayed as PiP

The call indicator displays the user’s counterpart in the active call:

If the video stream is enabled, it displays the counterpart’s video.
If the video stream is disabled, it displays their avatar.
If there are multiple participants in a conversation, the call indicator shows the participant currently speaking.

Figure 5. Unblu audio call displayed as PiP

The call indicator is also shown when the user goes back to the conversation’s chat during a call.

Figure 6. Ongoing call displayed as PiP in conversation chat

Like the active conversation indicator, the PiP indicator for an active call can be moved off-screen.

Figure 7. Ongoing call PiP, displayed off-screen, with removal area

While dragging, the removal area becomes visible. Dropping the PiP indicator there ends the call (but not the conversation).

Handling clicks on indicator buttons with a custom handler

You can intercept button clicks and use your own handler for these events. The following delegation protocols support this capability:

UnbluMobileCoBrowsingModuleDelegate

func unbluMobileCoBrowsingModuleHandleButtonClick(_ unbluMobileCoBrowsingModuleApi: UnbluMobileCoBrowsingModuleApi) -> ButtonInterceptorAction

UnbluCallModuleDelegate

func unbluMobileCallModuleHandlePiPButtonClick(_ unbluCallModuleApi: UnbluCallModuleApi) -> ButtonInterceptorAction

UnbluClientDelegate

func handleActiveConversationButtonClick() -> ButtonInterceptorAction
func handleUnbluCollapsed() -> ButtonInterceptorAction

public enum ButtonInterceptorAction {
case useInternalHandler
case useCustomHandler
}

You can enhance your delegation class by adding these functions, allowing you to return the action type ButtonInterceptorAction.useCustomHandler from these functions, which means you take responsibility for handling the event. In this case, the default internal handler will not be called and you will be responsible for showing or hiding the modal window.

func unbluMobileCallModuleHandlePiPButtonClick(_ unbluCallModuleApi: UnbluCallModuleApi) -> ButtonInterceptorAction {
unbluCoreApi.presentingAsModalView(reason: withReason, with:  .morphingIndicator, shadowStyle: .shadow)
return .useCustomHandler
}

Mobile co-browsing indicator

The mobile co-browsing indicator shows the visitor that a mobile co-browsing session is in progress. It consists of two UI components: the draggable floating action button and the capturing frame.

Figure 8. Action button and capturing frame of co-browsing indicator

The elements labeled on the picture are:

The action button
The capturing frame
The active conversation indicator

The mobile co-browsing indicator can be active and displayed alongside either the active conversation indicator or the active call indicator.

Draggable floating action button

The action button is above all other UI components in the app’s view hierarchy. It can be positioned anywhere on the screen except over the status bar.

When a mobile co-browsing session starts, an animation shows the user that the button can be dragged to a different position.

When a user presses the action button, a modal dialog appears, allowing the user to choose from three actions:

Stop co-browsing
Return to conversation (not displayed inside the conversation window)
Cancel

Capturing frame

The capturing frame is the line that wraps around the app’s active scene. Only the area within the frame is shared with the conversation’s participants.

Configuration

The action button is part of the collaboration layer controls. The property com.unblu.conversation.collaboration.showLayerControls specifies the participant types for whom the collaboration layer controls are visible. Remove CONTEXT_PERSON and SECONDARY_VISITOR from the property values to disable the button for the context person and secondary visitors, respectively.

When the button is disabled, visitors can only end a mobile co-browsing session by closing or ending the conversation.
The icon on the button can be changed with UnbluMobileCoBrowsingModuleApi.systemIconName.
The capturing frame can be disabled by setting com.unblu.conversation.collaboration.showVisitorLayerCapturingFrame to NONE.
The configuration properties in the com.unblu.mobiledevice.v2.client.core.MobileCoBrowsingIndicatorConfiguration group affect the appearance of the co-browsing indicator. They’re listed in the Mobile co-browsing indicator section of UI theming cheat sheet.

When both the action button and the capturing frame are disabled, the visitor has no indication that their app’s screen is being shared with the participants of the conversation.

Indicators act as a separate UIWindow on top of other windows. Clicking an indicator results in a call to unblu(didRequestShowUi reason: UnbluUiRequestReason, requestedByUser: Bool) with the reason UnbluUiRequestReason.pipButtonButtonPressed or UnbluUiRequestReason.floatingActiveConversationButtonPressed, respectively. You can display the Unblu view in your own way, or you can call the SDK API functions. The latter provide two additional presentation types that both remove the Unblu view from its current position in the window hierarchy:

uiPresentationController adds the Unblu view to the standard presentation controller, which slides from bottom to top.
morphingIndicator adds the Unblu view to a new UIWindow and opens it by smoothly transforming the indicator into a full-screen Unblu view.
shadowStyle defines whether the modal window has a shadow or not.

Figure 9. Comparison of different indicator animation options

The following code shows how to open the Unblu view.

let  unbluCoreApi = UnbluCoreApi(apiType: type, configuration: config, unbluNotificationApi: .instance)
...

unbluCoreApi.presentingAsModalView(reason: withReason, with:  .morphingIndicator, shadowStyle: .shadow)

If the Unblu view was opened using the presentingAsModalView function, you must close it using a specially designed function:

unbluCoreApi.dismissModalView()

During the closing process, the Unblu view is returned to its original position in the window hierarchy, maintaining the same size.