Contact usRequest a demo

Integrating Unblu into your app’s navigation

The features discussed in this article are available with the Unblu Android mobile SDK version 4.9.1 and newer.

The design guidelines for Android mobile devices are comprehensive, but they aren’t exhaustive. They offer enough variety for developers and designers to give your app its own distinctive look and feel.

The Unblu Android mobile SDK includes various components and interaction features that let you integrate Unblu into your app in seamless, intuitive ways. Using the appropriate features helps your users navigate your app with ease and confidence.

The modal view displays the Unblu UI in a new layer. It makes it easier for users to switch between Unblu and views in your app. This is useful in support cases, for example, where an agent might ask a visitor for information they entered previously in your app.

To use the modal view, you must first activate it with UnbluClient.setModalViewEnabled.

You can customize the modal view with the UnbluModalViewHandler interface. The interface lets you pass in the Unblu View as well as animation data to customize how the view is presented. The Android mobile SDK includes two default implementations, UnbluBottomSheetModalViewHandler and UnbluDefaultModalViewHandler.

To configure and set the UnbluModalViewHandler, use the method UnbluClient.setUnbluModaViewHandler.

Active conversation indicator

The modal view is attached to the active conversation indicator. The active conversation indicator provides users with an indication of ongoing conversations within the app. It ensures they’re aware of ongoing conversations without having to display the full conversation UI.

The active conversation indicator is optional. You can use the modal view without the indicator.

By default, the indicator displays an avatar supplied by the server. Alternatively, developers have the option to customize this avatar within the SDK to better align with the app’s branding or user preferences. If no avatar is set, the widget falls back to displaying the initials of the participants, ensuring a personalized touch.

When the user selects the active conversation indicator, it triggers the modal view, overlaying the current UI. (This requires an ongoing conversation in the current SDK’s instance state for the modal view to display.) If you don’t use the modal view, selecting the indicator emits a navigation event; see below for more information.

You can customize the active conversation indicator’s icon by calling UnbluClient.setActiveConversationIndicatorIcon with an UnbluImageResourceWrapper containing the image you want to use.

Using the active conversation indicator without the modal view

If you want to use the active conversation indicator without the modal view, you can instead trigger a UiVisibilityRequestModel by overriding the inherited method shouldPresentAsModal on UnbluBottomSheetModalViewHandler and setting its return value to false.

Triggering the modal view programatically from conversation instance

From the conversation instance, you can trigger a modal display of the Unblu UI, into the conversation scope. For more information, refer to the UnbluConversation.displayAsModalView method in the Android SDK reference.

Call UI indicator

The call UI indicator allows users to keep your call/video call UI while outside the conversation scope. Its click behaviour is analogous to that of the active conversation indicator: If the modal view’s configured and there’s an ongoing call, the user returns to the call UI such is not configured. If your app doesn’t use the modal view, selecting the call UI indicator emits a UiVisibilityRequestModel.

Co-browsing indicator

The co-browsing indicator is visible during active co-browsing sessions, ensuring users are aware of the ongoing collaboration. It can be active and displayed alongside the active conversation indicator or the call UI indicator.

Selecting the indicator brings up an AlertDialog with two options:

  • Stop the co-browsing session: This option ends the co-browsing session immediately.

  • Quick shortcut back to the conversation: This option returns users to their conversation in the Unblu chat UI without ending the co-browsing session.

What happens when the user opts to return to the chat UI depends on the the visibility of the active conversation avatar:

  • If the avatar is visible, choosing to return to the chat triggers a modal presentation of the Unblu View, allowing users to switch between co-browsing and the conversation seamlessly, without leaving their current app context.

  • If your app doesn’t use the modal view, the SDK emits a UiVisibilityRequestModel. This signals that the app should return the user to the Unblu View, ensuring a smooth transition between co-browsing and the chat.

Integration and customization

To integrate the co-browsing indicator into your mobile app, you must first enable it in the Collaboration Server.

There are a number of configuration properties that affect the appearance of the co-browsing indicator; refer to the com.unblu.mobiledevice.v2.client.core.MobileCoBrowsingIndicatorConfiguration group for more information. To change the indicator icon, however, you have to use the MobileCoBrowsingModule.setCoBrowsingIndicatorIcon method.

To handle clicks on the co-browsing indicator, implement the AlertDialog with the two options described above. Ensure the logic for both options is implemented correctly based on the visibility of the active conversation avatar.

Intercepting indicator clicks

To enhance interaction with the indicators while navigating, you can intercept the user’s click actions. To do so, set up an IndicatorButtonClickInterceptor. The interceptor lets you define the action the SDK should take by returning an enum value of type ClickInterceptorResult.