react-native-intercom
React Native wrapper for Intercom.io. Based off of intercom-cordova
Install
IOS
Run npm install react-native-intercom
Run react-native link
CocoaPods
Add the following to your podfile
pod 'react-native-intercom', :path => '../node_modules/react-native-intercom'
Manual
Follow how to manually link a library here https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content
Android
Run npm install react-native-intercom
Necessary Code Bits
iOS and Android each have their own special API keys. Get them in the intercom app settings, under "installation" in the left hand menu. Details here. They provide the snippets mentioned below to be easily pasted into your app.
IOS
More instructions here: Intercom for iOS
Initialize Intercom in your AppDelegate.m
#import "Intercom/intercom.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Initialize Intercom
[Intercom setApiKey:@"ios-api-key-goes-here" forAppId:@"app-id-goes-here"];
}
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 setDeviceToken:deviceToken];
}
Android
More instructions here: Intercom for Android
Your Android Application should look like:
// ...
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, "android-api-key-goes-here", "app-id-goes-here");
// ...
}
public List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
// ...
new IntercomPackage()
// ...
);
}
}And in your AndroidManifest.xml should look like
<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.myapp"
...
... add the tools namespace if not already present...
xmlns:tools="http://schemas.android.com/tools"
...
>
<application
...
>
...
...
...
<!-- Add these lines -->
<service
android:name="com.robinpowered.react.Intercom.IntercomIntentService"
android:exported="false">
<intent-filter
android:priority="999">
<action android:name="com.google.android.c2dm.intent.RECEIVE"/>
</intent-filter>
</service>
<receiver
android:name="io.intercom.android.sdk.push.IntercomPushBroadcastReceiver"
tools:replace="android:exported"
android:exported="true" />
</application>
</manifest>Don't forget the tools namespace xmlns:tools="http://schemas.android.com/tools" in your main <application> tag
Methods
logEvent(eventName, metadata);
Log an event with intercom.
Intercom.logEvent('event_name', { any: 'metadata', you: 'want' });registerIdentifiedUser({ userId })
Register a user with userId
Intercom.registerIdentifiedUser({ userId: 'bob' });registerUnidentifiedUser()
For when a userId is not available or relevant
Intercom.registerUnidentifiedUser();setLauncherVisibility('VISIBLE' | 'HIDDEN');
Show/hide the launcher button (hidden by default).
// show
Intercom.setLauncherVisibility('VISIBLE');
// hide
Intercom.setLauncherVisibility('HIDDEN');setBottomPadding(dpi)
Set the bottom padding for the launcher button
Intercom.setBottomPadding(64);updateUser(userAttributes)
Updates a registered user.
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: [
{
// Only supported for iOS now
// Parameters: IntercomUserAttribtesBuilder.m -> companyForDictionary()
},
],
custom_attributes: {
my_custom_attribute: 123,
},
});setUserHash(hash)
Set User Hash for Identity Validation (optional)
Intercom.setUserHash(hash_received_from_backend);reset()
Log user out
Intercom.reset();displayMessenger()
Show messenger overlay
Intercom.displayMessenger();displayMessageComposer()
Same as displayMessenger
Intercom.displayMessageComposer();displayMessageComposerWithInitialMessage(message)
Show Message Composer with an Initial Message
Intercom.displayMessageComposerWithInitialMessage('Initial message');hideMessenger()
Hide messenger overlay (works with any of the 3 above)
Intercom.hideMessenger();displayHelpCenter()
Show Help Center
Intercom.displayHelpCenter();displayConversationsList()
Show Conversation List
Intercom.displayConversationsList();setInAppMessageVisibility('GONE' | 'VISIBLE')
If set to 'GONE', hides in app messages
// hide in app messages
Intercom.setInAppMessageVisibility('GONE');
// show in app messages
Intercom.setInAppMessageVisibility('VISIBLE');getUnreadConversationCount()
Get Unread Message Count
Intercom.getUnreadConversationCount((err, count) => {
console.log(`${count} conversations waiting`);
});addEventListener(Intercom.Notifications.UNREAD_COUNT)
Listen for Unread Conversation Notifications. Example:
componentDidMount() {
Intercom.addEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange)
}
componentWillUnmount() {
Intercom.removeEventListener(Intercom.Notifications.UNREAD_COUNT, this._onUnreadChange);
}
_onUnreadChange = ({ count }) => {
//...
}removeEventListener(Intercom.Notifications.UNREAD_COUNT)
Removes event listener
sendTokenToIntercom(token)
Send FCM token directly to Intercom. Does nothing in iOS (that's handled with the setDeviceToken native code in the iOS instructions). Example:
Firebase.messaging()
.getToken()
.then(token => {
console.log('Device FCM Token: ', token);
Intercom.sendTokenToIntercom(token);
});setupAPN(deviceToken)
Set up iOS push notifications, passing in the device token.
Intercom.setupAPN('my-unique-device-token');registerForPush()
Register device for push notifications
Set up iOS push notifications, passing in the device token.
Intercom.registerForPush();