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

Open up XCode. Drag Intercom.framework to the “Embedded Binaries” section and select “Copy items if needed” to finish.

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.

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

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

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 :)

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!