Intercom has released an official package for React Native. Please use it.
https://github.com/intercom/intercom-react-native
React Native wrapper for Intercom.io. Based off of intercom-cordova
-
Install Intercom for iOS via whichever method you prefer.
More recently others have had more success Installing Intercom Manually.
In the past, installing via CocoaPods was recommended.
-
Install
react-native-intercom:yarn add react-native-intercom # or npm install react-native-intercom -
Link native dependencies
react-native link react-native-intercom
-
Manually Link the library in Xcode (Linking librarys on iOS)
- Open Xcode -> Right click "[Your Project Name]/Libraries" folder and select "Add File to [Your Project Name]" -> Select
RNIntercom.xcodeprojlocated innode_modules/react-native-intercom/iOS. - Open "General Settings" -> "Build Phases" -> "Link Binary with Libraries" and add
libRNIntercom.a
- Open Xcode -> Right click "[Your Project Name]/Libraries" folder and select "Add File to [Your Project Name]" -> Select
-
Config for iOS (intercom-ios)
-
Add
#import "Intercom/intercom.h"with the other imports at the top ofios/YOUR_PROJECT/AppDelegate.m. -
Initialize Intercom in
ios/YOUR_PROJECT/AppDelegate.mwith your Intercom iOS API Key and your Intercom App ID:- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Intercom [Intercom setApiKey:@"YOUR_IOS_API_KEY_HERE" forAppId:@"YOUR_APP_ID_HERE"]; }
-
Optional, Intercom's documentation suggests adding the following call in order to receive push notifications for new messages:
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken { // Intercom [Intercom setDeviceToken:deviceToken]; }
-
Optional, allow access to photos on iOS. Open
Info.plistin Xcode and add a new key "Privacy - Photo Library Usage Description". Or alternately, openios/YOUR_PROJECT/Info.plistand add:<dict> ...other configuration here... <key>NSPhotoLibraryUsageDescription</key> <string>Send photos to help resolve app issues</string> ...other configuration here... </dict>
-
-
Config for Android (intercom-android)
-
In
android/app/src/main/java/com/YOUR_APP/app/MainApplication.java, add the following code in the respective sections of the file using your Intercom Android API Key and Intercom App ID:// ...other configuration here... import com.robinpowered.react.Intercom.IntercomPackage; import io.intercom.android.sdk.Intercom; public class MainApplication extends Application { @Override public void onCreate() { super.onCreate(); Intercom.initialize(this, "YOUR_ANDROID_API_KEY_HERE", "YOUR_APP_ID_HERE"); // ...other configuration here... } public List<ReactPackage> getPackages() { // ...other configuration here... packages.add(new IntercomPackage()); // ...other configuration here... } }
-
In
android/build.gradleaddmaven { url "https://maven.google.com" }(h/t):allprojects { repositories { //...other configuration here... maven { url "https://maven.google.com" } } }
-
Decide which type of push messaging you want to install, and add choosen method to
android/app/build.gradle.-
If you'd rather not have push notifications in your app, you can use this dependency:
dependencies { implementation 'io.intercom.android:intercom-sdk-base:5.+' }
-
If "Firebase Cloud Messaging(FCM)", then:
dependencies { //...other configuration here... implementation 'io.intercom.android:intercom-sdk-base:9.+' implementation 'io.intercom.android:intercom-sdk:9.+' }
If you're already using FCM in your application you'll need to extend
FirebaseMessagingServiceto handle Intercom's push notifications (refer to Using Intercom with other FCM setups)Here's an example if you're using react-native-firebase as your existing FCM setup:
I. Add a new file if you don't have one (
android/app/src/main/java/com/YOUR_APP/MainMessagingService.java)package com.YOUR_APP; import io.invertase.firebase.messaging.*; import android.content.Intent; import android.content.Context; import io.intercom.android.sdk.push.IntercomPushClient; import io.invertase.firebase.messaging.ReactNativeFirebaseMessagingService; import com.google.firebase.messaging.RemoteMessage; import android.util.Log; import java.util.Map; public class MainMessagingService extends ReactNativeFirebaseMessagingService { private static final String TAG = "MainMessagingService"; private final IntercomPushClient intercomPushClient = new IntercomPushClient(); @Override public void onMessageReceived(RemoteMessage remoteMessage) { Map message = remoteMessage.getData(); if (intercomPushClient.isIntercomPush(message)) { Log.d(TAG, "Intercom message received"); intercomPushClient.handlePush(getApplication(), message); } else { super.onMessageReceived(remoteMessage); } } }
II. Then add the following code to
android/app/src/main/AndroidManifest.xml:<?xml version="1.0" encoding="utf-8"?> <manifest package="com.YOUR_APP" ...other configuration here... > <application ...other configuration here... xmlns:tools="http://schemas.android.com/tools" > <!-- ...other configuration here... --> <!-- ...ADD THE SERVICE BELOW... --> <service android:name=".MainMessagingService" android:enabled="true" android:exported="true"> <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service> </application> </manifest>
- make sure you have only one service intent with action com.google.firebase.MESSAGING_EVENT
-
-
-
Import Intercom and use methods
import Intercom from 'react-native-intercom'; // or… // var Intercom = require('react-native-intercom'); Intercom.registerIdentifiedUser({ userId: 'Bob' }); Intercom.logEvent('viewed_screen', { extra: 'metadata' }); //...rest of your file...
Note that calling
Intercom.registerIdentifiedUser({ userId: 'Bob' })(orIntercom.registerUnidentifiedUser()) is required before using methods which require that Intercom know the current user… such asIntercom.displayMessageComposer(), etc.
import Intercom from 'react-native-intercom';or
var Intercom = require('react-native-intercom');Intercom.logEvent('viewed_screen', { extra: 'metadata' });Intercom.registerIdentifiedUser({ userId: 'bob' });Intercom.registerUnidentifiedUser();Intercom.registerIdentifiedUser({ userId: 'bob' })
Intercom.updateUser({
// Pre-defined user attributes
email: '[email protected]',
user_id: 'user_id',
name: 'your name',
phone: '010-1234-5678',
language_override: 'language_override',
signed_up_at: 1004,
unsubscribed_from_emails: true,
companies: [{
company_id: 'your company id',
name: 'your company name'
}],
custom_attributes: {
my_custom_attribute: 123
},
});Intercom.setUserHash(hash_received_from_backend)Intercom.logout()Intercom.displayMessageComposer();Intercom.displayMessageComposerWithInitialMessage('Initial Message');Intercom.displayMessenger();Intercom.displayConversationsList();Intercom.displayHelpCenter();Intercom.setBottomPadding(64);Intercom.displayHelpCenter();Note that before calling Intercom.displayHelpCenter() it is required to enable Help Center in your Intercom settings.
Intercom.presentCarousel(carouselID);Note that before calling Intercom.presentCarousel(carouselID) it is required to enable carousels and create a carousel in your Intercom settings.
componentDidMount() {
Intercom.addEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange)
}
componentWillUnmount() {
Intercom.removeEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);
}
_onUnreadChange = ({ count }) => {
//...
} // The window was hidden
Intercom.Notifications.WINDOW_DID_HIDE
// The window was shown
Intercom.Notifications.WINDOW_DID_SHOWFirebase.messaging().getToken()
.then((token) => {
console.log('Device FCM Token: ', token);
Intercom.sendTokenToIntercom(token);
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent