Chatbox SDKs
Give Feedback

React Native SDK

Updated on November 29, 2021

The React Native Chatbox SDK can be installed in a few lines of codes in any React Native app.

Notice

The React native SDK is a third-party SDK made by Walter Holohan. It is not maintained officially by Crisp. His source-code is available here.

Features

  • iOS & Android support
  • TypeScript support

Installation

Install the library using either yarn or npm like so:

yarn add react-native-crisp-chat-sdk
npm install --save react-native-crisp-chat-sdk

Notes for iOS installation

If you're using React Native versions > 60.0, it's relatively straightforward:

cd ios && pod install

For versions below 0.60.0, use rnpm links:

  • Run react-native link react-native-crisp-chat-sdk
  • If linking fails, follow the manual linking steps

iOS

Start using Crisp by adding the following code in your AppDelegate:

#import <Crisp/Crisp.h>

[CrispSDK configureWithWebsiteID:@"YOUR_WEBSITE_ID"];

Update your Info.plist

To enable your users to take and upload photos to the chat as well as download photos to their photo library, add the Privacy - Camera Usage Description (NSCameraUsageDescription) and Privacy - Photo Library Additions Usage Description (NSPhotoLibraryAddUsageDescription) to your app's Info.plist.


Additional Steps

This library was written in Swift, so in-order for you app to compile, you need to have at least one .swift file in your source code a bridging header to avoid a runtime error.

All you have to do is:

  • Hit "File > New > File"
  • Select "Swift File"
  • Name the file (any name)
  • When prompted to create a bridging header, do so

Android

Add the Crisp SDK in your dependencies in app/build.gradle:

implementation 'im.crisp:crisp-sdk:1.0.8'

Configure your app for multidex:

android {
    defaultConfig {
        multiDexEnabled true
    }
}
dependencies {
    // If you're using AndroidX
    implementation 'androidx.multidex:multidex:2.0.1'
    // If you're not using AndroidX
    implementation 'com.android.support:multidex:1.0.3'
}

Initialize the library in your Application subclass:

import im.crisp.client.Crisp;

// Fixes multiDex error
import androidx.multidex.MultiDexApplication;

public class MainApplication extends MultiDexApplication implements ReactApplication {

    @Override
    public void onCreate() {
        super.onCreate();

        // Replace it with your WEBSITE_ID
        // Retrieve it using https://app.crisp.chat/website/[YOUR_WEBSITE_ID]/
        Crisp.configure(getApplicationContext(),"YOUR_WEBSITE_ID");
    }
}

Requirements

⚠️ Adding Camera and Photo permissions is mandatory, NSCameraUsageDescription and NSPhotoLibraryUsageDescription in Info.plist, to inform your users that you need to access to the Camera and Photo Library. You also have to enable "iCloud Documents" capability.

How To Get Your Website ID?

Go to your Crisp Dashboard, and copy your Website ID:

Copy your Website ID

Then, configure the Website ID in the SDK code.


Usage

You can view the example project for more usage examples.

import CrispChat, {
  setUserEmail,
  setUserNickname,
  setUserPhone,
  resetSession,
} from 'react-native-crisp-chat-sdk';

// ...
export default function App() {
  // this should be user ID that way app will load previous user chats
  setUserTokenId('abcd12345');

  // Set user's info
  setUserEmail('test@test.com');
  setUserNickname('John Smith');
  setUserPhone('+614430231224');

  // Call session reset when user loggs out
  resetSession();

  return <CrispChat />;
}

Availables APIs

The following SDK APIs are available to you:

  • CrispChatSDK.show()
  • CrispChatSDK.setTokenId('userID')
  • CrispChatSDK.pushSessionEvent(name: "Signup", color: CrispSessionEventColors.blue)
  • CrispChatSDK.setUserEmail('test@test.com')
  • CrispChatSDK.setUserNickname('John Doe')
  • CrispChatSDK.setUserPhone('003370123456789')
  • CrispChatSDK.setUserAvatar('https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg')
  • CrispChatSDK.setSessionSegment('segment')
  • CrispChatSDK.setSessionString('key', 'value')
  • CrispChatSDK.setSessionBool('key', 'value')
  • CrispChatSDK.setSessionInt('key', 'value')
  • CrispChatSDK.resetSession()