liber-react-native-intercom
v18.0.1
Published
A React Native client for Intercom.io
Downloads
6
Readme
react-native-intercom
React Native wrapper for Intercom.io. Based off of intercom-cordova
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
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.xcodeproj
located 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.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)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.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 '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.
Usage
Import or Require the module
import Intercom from 'react-native-intercom';
or
var Intercom = require('react-native-intercom');
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: '[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
},
});
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.
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);
});