intercom-react-native
React Native wrapper for Intercom.io. Based off of intercom-cordova and forked from react-native-intercom.
Installation Guide
-
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
intercom-react-native
:yarn add intercom-react-native # or npm install intercom-react-native
-
Link native dependencies
react-native link intercom-react-native
-
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.xcodeproj
located innode_modules/intercom-react-native/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.m
with 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.plist
in Xcode and add a new key "Privacy - Photo Library Usage Description". Or alternately, openios/YOUR_PROJECT/Info.plist
and 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() { return Arrays.<ReactPackage>asList( // ...other configuration here... new IntercomPackage() // ...other configuration here... ); } }
-
In
android/build.gradle
addmaven { 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... compile 'io.intercom.android:intercom-sdk-fcm:5.+' }
If you're already using FCM in your application you'll need to extend
FirebaseMessagingService
to handle Intercom's push notifications (refer to Using Intercom with other FCM setups)react-native-firebase as your existing FCM setup:
Here's an example if you're usingI. 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.RNFirebaseMessagingService; import com.google.firebase.messaging.RemoteMessage; import android.util.Log; import java.util.Map; public class MainMessagingService extends RNFirebaseMessagingService { 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>
-
-
-
Import Intercom and use methods
import Intercom from "intercom-react-native"; // or… // var Intercom = require('intercom-react-native'); 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.
Usage
Import or Require the module
import Intercom from "intercom-react-native";
or
var Intercom = require("intercom-react-native");
Log an event
Intercom.logEvent("viewed_screen", { extra: "metadata" });
Register a Logged In user
Intercom.registerIdentifiedUser({ userId: "bob" });
Register Unidentified user
Intercom.registerUnidentifiedUser();
Register a Logged In user and post extra metadata
Intercom.registerIdentifiedUser({ userId: "bob" });
Intercom.updateUser({
// Pre-defined user attributes
email: "mimi@intercom.com",
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,
},
});
Set User Hash for Identity Validation (optional)
Intercom.setUserHash(hash_received_from_backend);
Sign Out
Intercom.logout();
Show Message Composer
Intercom.displayMessageComposer();
Show Message Composer with an Initial Message
Intercom.displayMessageComposerWithInitialMessage("Initial Message");
Display Latest Conversation
Intercom.displayMessenger();
Display Conversations List
Intercom.displayConversationsList();
Display Help Center
Intercom.displayHelpCenter();
Set Bottom Padding
Intercom.setBottomPadding(64);
Display Help Center
Intercom.displayHelpCenter();
Note that before calling Intercom.displayHelpCenter()
it is required to enable Help Center in your Intercom settings.
Display Mobile Carousel
Intercom.displayCarousel("12345");
Display Article
Intercom.displayArticle("12345");
Note that before calling Intercom.displayArticle()
it is required to enable Help Center in your Intercom settings.
Listen for Unread Conversation Notifications
componentDidMount() {
Intercom.addEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange)
}
componentWillUnmount() {
Intercom.removeEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);
}
_onUnreadChange = ({ count }) => {
//...
}
Other Notifications
// The window was hidden
Intercom.Notifications.WINDOW_DID_HIDE;
// The window was shown
Intercom.Notifications.WINDOW_DID_SHOW;
Send FCM token directly to Intercom for push notifications (Android only)
Firebase.messaging().getToken()
.then((token) => {
console.log('Device FCM Token: ', token);
Intercom.sendTokenToIntercom(token);
});