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 indicators

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
}

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. /kd/TODO: Add the names of the 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 8. 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.

Unblu indicators

Active conversation indicators

Active call indicator with Picture in Picture (PiP)

Handling clicks on indicator buttons with a custom handler

Manually show and hide the Unblu modal window