Home
/
React Native
/
Using Intercom

Using Intercom

Track who your users are and what they do in your mobile app and customize the Intercom Messenger. Here’s how to configure the Intercom React Native wrapper:

User Login

You’ll now need to login your users before you can talk to them and track their activity in your app.

There are two type of users that can be created in Intercom: identified and unidentified.

  • Unidentified users: If your app does not have a login option, like Angry Birds or a flashlight app, you have unidentified users.
  • Identified users: If users need to login to your app to use it, such as Facebook, Instagram, or Slack, they would be considered identified users.

There are three ways to log users into Intercom that visit your app:

  1. Only login unidentified users
  2. Only login identified users
  3. Login both identified and unidentified users - an example of this is where your app has a login option, but it’s not essential for users to login to use your app, like Google Maps or YouTube.

The option you choose should be informed by the design of your app, namely whether you have a login option.

Login your unidentified users (visitors)

loginUnidentifiedUser: () => Promise<boolean>;

Usage

Login a unidentified user.

This is a user that doesn't have any identifiable information such as a userId or email.

Login an unidentified user in your application like so:

Intercom.loginUnidentifiedUser()

Login your identified (logged in) users into Intercom

loginUserWithUserAttributes: (params: UserAttributes) => Promise<boolean>;

Parameters

  • params : The UserAttributes object that contains the user's email or userId.

Usage

Login a user with identifiable information.
Valid identifiers are userId and email which must be set in the UserAttributes object.

You can Login your like this

Intercom.loginUserWithUserAttributes({email:'bob@example.com',userId:'bob-123'})

Register both unidentified (non-logged in) and identified (logged in) users

If you have an app with both unidentified and identified users, you will need to either conditionally choose which registration to call:

if (loggedIn) {
  Intercom.loginUserWithUserAttributes({email:'bob@example.com',userId:'bob-123'})
}else {
  Intercom.loginUnidentifiedUser()
}

Or you can login with Intercom.loginUnidentifiedUser() and if a user signs up/logs in later in your app call Intercom.loginUserWithUserAttributes. We will automatically transfer over any attributes or conversations from the unidentified user to the identified user, so you won't lose anything.

Best practices for logging in users

  • It is important to only login identified users after verification of a login.
  • You can provide a userId and/or email when logging in an identified user. We recommend giving all your users unique userIds, but if you haven't implemented this, you should provide an email.
  • Don’t use an email address as a userId as this field cannot be changed later. If you choose provide only an email address, the email address must not be associated with any other users on your workspace.

How to logout an identified user

logout(): Promise<boolean>;

Usage

Log a user out of their Intercom session.
This will dismiss any Intercom UI and clear Intercom's local cache.

You should only logout an identified user. Logging out an unidentified user will result in orphan records that cannot be merged in future.

When users want to log out of your app, simply call:

Intercom.logout()

👍

Intercom knows when your app is backgrounded and comes alive again, so you won’t need to re-register your users.

Update a user

updateUser(userAttributes: UserAttributes): Promise<boolean>;

Parameters

  • userAttributes : The UserAttributes object with the user data.

Usage

Update a user in Intercom with data specified in UserAttributes.

You can send any data you like to Intercom from standard user attributes that are common to all Intercom users to custom user attributes that are unique to your app.

Standard user attributes can be updated by calling:

Intercom.updateUser({
  email: 'bob@example.com',
  userId: 'bob-123',
  name: 'Bob',
  phone: '010-1234-5678',
  languageOverride: 'fr',
  signedUpAt: 1621844451,
  unsubscribedFromEmails: true,
});

Typically our customers see a lot of value in sending custom data that relates to customer development, such as price plan, value of purchases, etc. Custom user attributes must first be created in Intercom using one of the methods described here. They can then be modified by passing in customAttributes object to updateUser:

Intercom.updateUser({
  customAttributes: {
    monthly_spend: 123,
    paid_subscriber: true,
    team_mates: 3
  }
});

You can also set company data on your user with the Company object, like:

Intercom.updateUser({
  companies: [{
    createdAt: 1621844451,
    id: 'companyId', // id is a required field for adding or modifying a company.
    monthlySpend: 100,
    name: 'CompanyName',
    plan: "plan",
    customAttributes: {
      city: "New York"
    },
  }],
});

Submit an event

logEvent(eventName: string, metaData?: MetaData): Promise<boolean>;

Parameters

  • eventName : The name of the event.
  • metaData : Metadata Objects support a few simple types that Intercom can present on your behalf.

You can log events in Intercom that record what users do in your app and when they do it. For example, you could record the item a user ordered from your mobile app, and when they ordered it.

Intercom.logEvent('order-item', {itemId:'item-1', orderDate:"1392036272"})

Present Intercom Spaces

Spaces are different areas of the messenger that you can open directly. Intercom defines 3 possible spaces:

  1. Home
  2. Help Center
  3. Messages

These spaces can be presented by:

present(): Promise<boolean>;

Usage

Present Intercom as a modal overlay in your app.
The Home space is displayed by default.

Intercom.present();

If you want to present to a specific space

presentSpace(space: Space): Promise<boolean>;

Parameters

  • space : The Intercom Space to be presented.

Usage

Present an Intercom space as a modal overlay in your app

Intercom.presentSpace(Space.home);

This opens Intercom and displays Home space.

Similarly, you can present HelpCenter and Messages by passing the respective Space.

Present Intercom Content

presentContent(content: Content): Promise<boolean>;

Parameters

  • content : An IntercomContent object.

Usage

Present Intercom content.

here are various IntercomContent that you can present. The available types are:

  1. Article
  2. Survey
  3. Carousel
  4. HelpCenterCollections
  5. Conversation via ID

To present an Intercom content you create the respective IntercomContent object and then call presentContent with that object

For instance, you create an "article" IntercomContent as follows:

IntercomContent.articleWithArticleId('123456')

Similarly, you can can create surveys, carousels and help center collections.

You can then present such content using:

Intercom.presentContent(
      IntercomContent.articleWithArticleId('123456')
);

Or, you can present a conversation using conversation ID:

Intercom.presentContent(
      IntercomContent.conversationWithId('123456')
);

🚧 Make sure your content is live

A content must be ‘live’ to be used in this feature. If it is in a draft or paused state, end-users will see an error if the app tries to open the content.

Customize the Intercom Messenger

We definitely recommend that you customize the Intercom Messenger so that it feels completely at home on your mobile app. Here’s how:

Choose how the launcher appears and opens for your users

If you’d like the standard launcher to appear on the bottom right-hand side of your screen, just call:

Intercom.setLauncherVisibility(Visibility.VISIBLE)

If you want to set the bottom padding for the Messenger, which dictates how far from the bottom of the screen the default launcher and in-app messages will appear, you can call:

Intercom.setBottomPadding(120)

Create a custom launcher

However, if you’d like the Messenger to open from another location in your mobile app, you can create a custom launcher. This allows you to specify a button, link or element that opens the Messenger. For example, you can trigger the launcher to open when a customer clicks on your ‘Help and Support’ button.

If you have a custom launcher, you can call Intercom.present();

<Button title="Open Intercom Messenger" onPress={()=>{Intercom.present();}}/>

If you want to open the Messenger to the composer screen with message field pre-populated you can call:

Intercom.displayMessageComposer("Message")

Show your user’s unread message count

Grab the current count with this method:

Intercom.getUnreadConversationCount()

Then, start listening for updates using:

useEffect(() => {
    const countListener = Intercom.addEventListener(
      IntercomEvents.IntercomUnreadCountDidChange,
      (response) => {
        setCount(response.count as number);
      }
    );

    return () => {
      countListener.remove();
    };
  }, []);

Temporarily hide notifications

You can prevent in app messages from popping up in certain parts of your app, by calling:

Intercom.setInAppMessageVisibility(Visibility.GONE)

You can hide any Intercom screen in your app, by calling:

Intercom.hideIntercom();

What's next?

Now that you have Intercom configured it's time to:

Previous page
Next page