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.
You can also set a custom icon instead. The name of the icon corresponds to the image in the app assets.
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.
The removal area is optional. You can disable it with the following code:
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.
The active conversation indicator is enabled by default. To disable it use the following method:
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.
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.
The call indicator is also shown when the user goes back to the conversation’s chat during a call.
Like the active conversation indicator, the PiP indicator for an active call can be moved off-screen.
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 }
Manually show and hide the Unblu modal window
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.
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.