Need help with react-native-intercom?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tinycreative
390 Stars 269 Forks MIT License 197 Commits 104 Opened issues

Description

React Native wrapper for Intercom.io

Services available

!
?

Need anything else?

Contributors list

react-native-intercom

React Native wrapper for Intercom.io. Based off of intercom-cordova

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

    react-native-intercom
    :
    yarn add react-native-intercom  # or npm install react-native-intercom
    
  3. Link native dependencies

    react-native link react-native-intercom
    
  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/react-native-intercom/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:
      - (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:

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

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

        dependencies {
            implementation 'io.intercom.android:intercom-sdk-base:5.+'
        }
        
      2. 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
        )
        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
        :
          
        
        
        <!-- ...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"></action>
            </intent-filter>
        </service>
  7. 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' })
    (or
    Intercom.registerUnidentifiedUser()
    ) is required before using methods which require that Intercom know the current user… such as
    Intercom.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.

Present a Carousel

Intercom.presentCarousel(carouselID);

Note that before calling

Intercom.presentCarousel(carouselID)
it is required to enable carousels and create a carousel 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);
});

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.