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:
- Only login unidentified users
- Only login identified users
- 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'semail
oruserId
.
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:
- Home
- Help Center
- 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:
- Article
- Survey
- Carousel
- HelpCenterCollections
- 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:
- Select the color and language of the Messenger and how personalize your profiles.
- Follow the below steps to choose how the launcher appears and opens for your users.
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:
- Configure your Help enter
- Enable Identity Verification
- Configure your app for Push Notifications.