intercom-react-native

React Native wrapper for Intercom.io. Based off of intercom-cordova and forked from react-native-intercom.

Installation Guide

1. 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.

2. Install intercom-react-native:

``bash
yarn add intercom-react-native # or npm install intercom-react-native
`

3. Link native dependencies

`bash
react-native link intercom-react-native
`

4. Manually Link the library in Xcode (Linking librarys on iOS)

1. Open Xcode -> Right click "[Your Project Name]/Libraries" folder and select "Add File to [Your Project Name]" -> Select RNIntercom.xcodeproj located in node_modules/intercom-react-native/iOS.
2. Open "General Settings" -> "Build Phases" -> "Link Binary with Libraries" and add libRNIntercom.a

5. Config for iOS (intercom-ios)

1. Add #import "Intercom/intercom.h" with the other imports at the top of ios/YOUR_PROJECT/AppDelegate.m.
2. Initialize Intercom in ios/YOUR_PROJECT/AppDelegate.m with your Intercom iOS API Key and your Intercom App ID:

`obj-c
- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions {

// Intercom
[Intercom setApiKey:@"YOUR_IOS_API_KEY_HERE" forAppId:@"YOUR_APP_ID_HERE"];

}
`

3. Optional, Intercom's documentation suggests adding the following call in order to receive push notifications for new messages:

`obj-c
- (void)application:(UIApplication )application didRegisterForRemoteNotificationsWithDeviceToken:(NSData )deviceToken {

// Intercom
[Intercom setDeviceToken:deviceToken];

}
`

4. Optional, allow access to photos on iOS. Open Info.plist in Xcode and add a new key "Privacy - Photo Library Usage Description". Or alternately, open ios/YOUR_PROJECT/Info.plist and add:

`xml


...other configuration here...

NSPhotoLibraryUsageDescription
Send photos to help resolve app issues

...other configuration here...


`

6. Config for Android (intercom-android)

1. 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:

`java

// ...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 getPackages() {
return Arrays.asList(

// ...other configuration here...

new IntercomPackage()

// ...other configuration here...

);
}
}
`

2. In android/build.gradle add maven { url "https://maven.google.com" } (h/t):

`gradle
allprojects {
repositories {

//...other configuration here...

maven { url "https://maven.google.com" }
}
}
`

3. Decide which type of push messaging you want to install, and add choosen method to android/app/build.gradle.

1. If you'd rather not have push notifications in your app, you can use this dependency:

`gradle
dependencies {
implementation 'io.intercom.android:intercom-sdk-base:5.+'
}
`

1. If "Firebase Cloud Messaging(FCM)", then:

`gradle
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)

`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



...other configuration here...

>


...other configuration here...

xmlns:tools="http://schemas.android.com/tools"
>



android:name=".MainMessagingService"
android:enabled="true"
android:exported="true">






`

7. Import Intercom and use methods

`javascript
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' }) (or Intercom.registerUnidentifiedUser()) is required before using methods which require that Intercom know the current user… such as Intercom.displayMessageComposer(), etc.

Usage

$3

`javascript
import Intercom from "intercom-react-native";
`

or

`javascript
var Intercom = require("intercom-react-native");
`

$3

`javascript
Intercom.logEvent("viewed_screen", { extra: "metadata" });
`

$3

`javascript
Intercom.registerIdentifiedUser({ userId: "bob" });
`

$3

`javascript
Intercom.registerUnidentifiedUser();
`

$3

`javascript
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,
},
});
`

$3

`javascript
Intercom.setUserHash(hash_received_from_backend);
`

$3

`javascript
Intercom.logout();
`

$3

`javascript
Intercom.displayMessageComposer();
`

$3

`javascript
Intercom.displayMessageComposerWithInitialMessage("Initial Message");
`

$3

`javascript
Intercom.displayMessenger();
`

$3

`javascript
Intercom.displayConversationsList();
`

$3

`javascript
Intercom.displayHelpCenter();
`

$3

`javascript
Intercom.setBottomPadding(64);
`

$3

`javascript
Intercom.displayHelpCenter();
`

Note that before calling Intercom.displayHelpCenter() it is required to enable Help Center in your Intercom settings.

$3

`javascript
Intercom.displayCarousel("12345");
`

$3

`javascript
Intercom.displayArticle("12345");
`

Note that before calling Intercom.displayArticle() it is required to enable Help Center in your Intercom settings.

$3

`javascript
componentDidMount() {
Intercom.addEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange)
}

componentWillUnmount() {
Intercom.removeEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);
}

_onUnreadChange = ({ count }) => {
//...
}
`

$3

`javascript
// The window was hidden
Intercom.Notifications.WINDOW_DID_HIDE;

// The window was shown
Intercom.Notifications.WINDOW_DID_SHOW;
`

$3

`
Firebase.messaging().getToken()
.then((token) => {
console.log('Device FCM Token: ', token);
Intercom.sendTokenToIntercom(token);
});
``