All Collections
Messenger
Getting started
Use the Messenger in your mobile app
Use the Messenger in your mobile app

How to install and use the next generation Messenger on mobile.

Beth-Ann Sher avatar
Written by Beth-Ann Sher
Updated over a week ago

The next generation Messenger requires the latest mobile SDKs to give customers the best experience on mobile. This article explains how to customize the Messenger for mobile, and which features are supported on iOS and Android apps.

To use the Mobile Messenger (including the new Tickets space), you'll need to install or upgrade to v15.2.0 for iOS SDK and Android SDK, v11.0.0 for Cordova, or v0.59 for React Native.

Customize Messenger for mobile

You can customize and preview your Messenger on mobile from Messenger settings > Platforms > Mobile SDKs and then select the device preview for iOS or Android.


Available in mobile apps

When users access the Messenger on your iOS or Android app it launches as a native bottom sheet. This allows the Messenger to look and feel like it’s embedded organically, providing a consistent and seamless customer journey. The user can still see exactly where they are in your app and then decide how they want to interact with you in the Messenger.

The Messenger can support multiple brands you might have. Select or add a new brand style from the Styling tab.

Mobile Messenger brands also support Multi Help Center, so you can select the right Help Center for each brand style.

Design each brand to match your business needs. Style it with your logo, and a header background color or image.

Then decide which buttons customers can interact with by enabling the Messages, Tickets or Help spaces under Content > Spaces (News and Tasks spaces are coming soon on mobile SDKs).

Customize Home with apps such as Send us a message or Search for help, and other apps you’ve installed on your workspace.

Customers will be able to start conversations with you from the Home and Messages space if they match your audience rules.

They can also submit tickets and track their progress from the dedicated Tickets space (if you've enabled it under Content > Spaces).

The Compact Messenger works a little differently on mobile.


Differences between web and mobile SDKs

Spaces

  • Web - Spaces appear as tabs at the bottom of the Messenger. This tab bar navigation is always visible from the topmost level of each space.

  • Mobile SDKs - Spaces appear as buttons at the top of the Home space only. They don’t appear in other spaces.

Navigation

  • Web - The tab bar disappears when customers navigate to content within a space (e.g. an article, conversation, or ticket). A ‘back’ button appears at the top of the Messenger.

  • Mobile SDKs - Customers can navigate back to the Home space from any other space by using the ‘back’ button (or the system ‘back’ button on Android).

Notifications

  • Web - Space tabs will show notification badges if they contain new content (e.g. a new message in a conversation).

  • Mobile SDKs - Space buttons will show notification badges if they contain new content (e.g. a new message in a conversation or a ticket status update).

Messages in the mobile SDKs

  • In the Messages space there’s a button in the header on iOS to start a new conversation. On Android, there’s a Floating Action Button instead.


Android SDK

As this is a major update, there are few API changes which are listed below:

Method - Kotlin

Description

fun present(space: IntercomSpace)

Open a specific space in Intercom. (Home, Messages, Help Center). Defaults to Home space.

fun present()

Open Intercom - defaults to the Home space.

fun presentContent(content: IntercomContent)

Present Intercom content. Valid content types are Article, Carousel, Help Center Collections.

These methods can still be used, but will be removed in a future release.

Method - Kotlin

fun displayMessenger()
fun displayHelpCenter()
fun displayHelpCenterCollections(collectionIds: List<String>)
fun displayArticle(articleId: String)
fun displayCarousel(carouselId: String)
fun displaySurvey(surveyId: String)


iOS SDK

As this is a major update, there are few API changes which are listed below:

Method - Swift

Method - Obj-C

Description

func present(_ space:Space)
+ (void)presentIntercom:(Space)space

Open a specific space in Intercom. (Home, Messages, Help Center).

func present()
+ (void)presentIntercom

Open Intercom - defaults to the Home space.

func presentContent(_ content: Content)
+ (void)presentContent:(IntercomContent *)content

Present Intercom content. Valid content types are Article, Carousel, Help Center Collections.

The following methods have also been fully deprecated:

Method - Swift

Method - Obj-C

func presentMessenger()
+ (void)presentMessenger
func presentHelpCenter()
+ (void)presentHelpCenter 
func presentHelpCenterCollections(_ collectionIds: [String])
+ (void)presentHelpCenterCollections:(nonnull NSArray<NSString *> *)collectionIds
func presentArticle(_ articleId: String)
+ (void)presentArticle:(nonnull NSString *)articleId
func presentCarousel(_ carouselId: String)
+ (void)presentCarousel:(nonnull NSString *)carouselId
func presentSurvey(_ surveyId: String)
+ (void)presentSurvey:(nonnull NSString *)surveyId


Backwards and forwards compatibility for mobile SDKs

It’s possible for your workspace and mobile SDKs to be out of sync. For example, you can have the new Messenger enabled in your settings but not yet have upgraded the mobile SDKs in your app. Here’s how this will work:

Previous Messenger settings

(You have not opted in.)

New Messenger settings

(You have opted in.)

Previous Messenger mobile SDK

(less than v14.0.1)

Works the same as before. All previous Messenger settings are respected.

The new Messenger settings will be applied in a sensible way to render the previous Messenger experience in the mobile app.

Some of the new Messenger features won’t work in the previous Messenger mobile SDK:

  • Instead of showing a gradient header background, it’ll show a solid color using your pre-defined fallback color.

  • Instead of showing a header background image, it’ll show a solid color using your pre-defined fallback color.

  • External link cards will not render in the Home space.

New Messenger mobile SDK

(v14.0.1 and higher)

The previous Messenger settings will be applied in a sensible way to render the new Messenger experience in the mobile app.

For example:

  • It’ll default to a solid color header, with a cut-off style (no fade).

All new Messenger settings are respected.


💡Tip

Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts


Did this answer your question?