Intercom: Integration With React Native

Intercom is amazing. It’s a simple, easy-to-use chat support service to provide direct communication between your users and you. Web, IOS, and Android installation and configuration guides can be found online and in Intercom’s docs… but tutorials with React Native? Scarce.

Yeah… it’s easy until there are a bunch of unsupported modules you need to write native code for…

Thankfully, I’ve successfully integrated Intercom with a React Native project and can hopefully provide you a painless “how to” guide. I’m writing this tutorial a while after installation… so feel free to message me at any time if you feel there is information that I may have forgotten.

To start this off, (obviously) make an Intercom account and create an app. You’ll be issued an API key and an App ID.

The skeleton of all this is react-native-intercom, a great wrapper library to get us started in the sort-of gnarly web of native+JS code. Just kidding, it’s not that bad.

First, npm install this package and run react-native link. That’s it for the JS stuff. We’ll come back to this later.

iOS

1. Download Intercom for iOS
2. Open up XCode. Drag Intercom.framework to the “Embedded Binaries” section and select “Copy items if needed” to finish.
3. In your app’s target’s “Build Phases”, find the “Run Script Phase” section and copy and paste: bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Intercom.framework/strip-frameworks.sh". This script is needed if you’re planning on submitting this to the App Store.
4. Add NSPhotoLibraryUsageDescription to your Info.plist to explain to Apple why it is necessary for this app to have image upload functionality… #ohApple. Personally, I just put “Send photos to help resolve app issues”… duh
5. Finally. Let’s get into the code.

In AppDelegate.m:

#import "Intercom/intercom.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [Intercom setApiKey:@"YOUR-API-KEY" forAppId:@"YOUR-APP-ID"];
    [Intercom registerUnidentifiedUser];
}

Go to Intercom to finish registering your iOS application. Once you’re on the Intercom dashboard, head to your App settings (found in Settings > App Settings) and under the Installation section, click on iOS. Here, you can customize how you want the chat interface to look like (colors, patterns, etc.). Once you click through this, it will tell you to refresh your app after all of the code has been injected properly. When you do a rebuild via XCode or your terminal, you’ll get a congratulatory pop-up from Intercom notifying you that you have successfully finished setting Intercom up.

(Optional) Push notifications

I’m going to assume you already have push notifications setup with your app.

• Launch “Keychain Access” on your computer and find the iOS push certificate for your application. Once you do, expand it and export the 2 items.

• Next, create a PEM file from the .p12 you just exported. In your terminal, navigate to the directory the .p12 is saved in and run this command: openssl pkcs12 -in FILENAME.p12 FILENAME.pem -nodes
• Awesome! Now you have the PEM file. Upload it to Intercom like so:

Finally, in AppDelegate.m:

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [Intercom setDeviceToken:deviceToken];
}

Android

First, add this dependency to app/build.gradle:

dependencies {
    compile project(':react-native-intercom')
}

Then, install Intercom via 1 of 3 options: Google Cloud Messaging (GCM), Firebase Cloud Messaging (FCM), or without push notifications. If you want push notifications, follow either installation with GCM or FCM. Depending on which one of the 3, you’ll add different dependencies to your app’s build.gradle file:

// GCM
dependencies {
    compile 'io.intercom.android:intercom-sdk:3.+'
}
  
// FCM
dependencies {
    compile 'io.intercom.android:intercom-sdk-base:3.+'
    compile 'io.intercom.android:intercom-sdk-fcm:3.+'
}
// No push
dependencies {
    compile 'io.intercom.android:intercom-sdk-base:3.+'
}

In MainApplication.java:

import com.robinpowered.react.Intercom.IntercomPackage;
import io.intercom.android.sdk.Intercom;
@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
   new IntercomPackage()
 )
};
@Override
  public void onCreate() {
    super.onCreate();
    Intercom.initialize(this, "YOUR-API-KEY", "YOUR-APP-ID");
}

As with before, navigate back to Intercom to finish registering your Android application. When you build via Android Studio and run the app in the emulator, you’ll get a congratulatory pop-up notifying you of a successful setup.

(Optional) Push Notifications

I set up push notifications with GCM, but if you are going with FCM, it’s a similar protocol :)

First, go to Google Developers Page to set up Google services for your application.

If you do not already have an application listed/registered, you can add one with a specified app name and the package name of your Android app:

Once you click the blue “Continue to Choose and configure services", you’ll be presented with two important pieces of data: your server API key and your sender ID.

The server API key will go into the Intercom Android “Enable Push Notifications” section:

The sender ID will go into your app’s res/values/strings.xml:

<string name="intercom_gcm_sender_id">YOUR_SENDER_ID</string>

JAVASCRIPT!!

And now… to unravel the magic in JavaScript.

In whichever component you desire…

import React, { Component } from 'react';
import Intercom from 'react-native-intercom';
class IntercomExample extends Component {
    componentDidMount() {
        Intercom.registerForPush();   
        Intercom.addEventListener(
        Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);       
    }
    componentWillUnmount() {
        Intercom.removeEventListener(
        Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);      
    }
    componentWillMount() {
      Intercom.handlePushMessage();
    }
    _onUnreadChange = ({ count }) => {
        console.log(count);    
    }
    render() {
        // code code codez
    }
}

And there you have it! Intercom fully integrated into your application.

Feel free to message and/or leave a comment if you need help setting up Intercom. I’m also open to suggestions on improvements (whether that’s for writing tutorials in the future or regarding this post)! Cheers!