How to Implement Crisp SDK in a React Native App?

Implementing live chat within a mobile app is simple and provides users with a unique connection to your customer representative. Crisp provides you with a React Native SDK that can enable you to add chat functionality to your app, track users, manage chat sessions, capture the occurrence of chat events, send out push notifications, etc.

What is Crisp?

Crisp is a cloud-based customer assistance service that allows businesses to communicate with users via live chat.

With the help of the React Native SDK, incorporating Crisp into your application can be done in a few steps rather than directing users toward customer support.

Some useful features include:

• Live chat
• User identification
• Session persistence
• Push notifications
• Session data
• Chat event listeners
• Helpdesk articles
• Bot scenarios

How To Create Your   WEBSITE_ID 

1. Create a Crisp account / workspace

• Visit the Crisp dashboard at: Crisp Dashboard
• Create your workspace/website if you haven’t already.

2. Get the Website ID

• In Crisp, go to: Settings → Workspace Settings → Setup & Integrations
• Then find the Website ID and copy it. The current Crisp documentation identifies this as the ID required by the React Native SDK.

Step 1: Install the Required Packages

npm install crisp-sdk-react-native

or

yarn add crisp-sdk-react-native

For iOS:

cd ios
pod install

Step  2: Create a Crisp Service

It’s a better idea to create a Crisp service so that you won’t need to call Crisp APIs from different screens.

Create:

app/services/CrispService.ts

import {
  configure,
  show,
  resetSession,
  setSessionString,
} from 'react-native-crisp-chat-sdk';
const WEBSITE_ID = 'YOUR_CRISP_WEBSITE_ID';
class CrispService {
  initialize() {
    configure(WEBSITE_ID);
  }
  openChat() {
    show();
  }
  async openProductChat(url: string) {
    await setSessionString('product_url', url);
    show();
  }
  closeSession() {
    resetSession();
  }
}
export default new CrispService();

Step  3: Initialize Crisp

Crisp needs to be initialized at the startup of the app.

For example, inside your main component:

import React, { useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import CrispService from 'app/services/CrispService';
import ChatMsgCmp from 'app/components/ChatMsgCmp';
const App = () => {
  useEffect(() => {
    // Initialize Crisp when the app starts
    CrispService.initialize();
  }, []);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        My React Native App
      </Text>
      {/* Floating Crisp Chat Button */}
      <ChatMsgCmp />
    </View>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: '600',
  },
});

Step  4: Create a Floating Chat Button

import {
  Pressable,
  Image,
  StyleSheet,
} from 'react-native';
import React from 'react';
import {
  responsiveHeight,
} from 'react-native-responsive-dimensions';
import CrispService from 'app/services/CrispService';
const ChatMsgCmp = () => {
  return (
    <Pressable
      style={styles.main}
      onPress={() => CrispService.openChat()}
    >
      <Image
        source={require('../../assets/conversation.png')}
        style={styles.image}
      />
    </Pressable>
  );
};
export default ChatMsgCmp;
const styles = StyleSheet.create({
  main: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1000,
    bottom: responsiveHeight(2),
    right: responsiveHeight(2),
    height: responsiveHeight(6),
    width: responsiveHeight(6),
    borderRadius: responsiveHeight(6),
    backgroundColor: '#1d56d3',
  },
  image: {
    height: responsiveHeight(4),
    width: responsiveHeight(4),
    tintColor: 'white',
  },
});

Conclusion

Using Crisp in a React Native application allows one to offer real-time support, as customers will not be forced to leave the application to get in touch with the help center. Crisp SDK allows one to set up a live chat in the application, create a custom button for chat, identify the users, save the information regarding the session, and handle chats in the React Native app itself.

By keeping Crisp integration in a common service, you can make the integration more organized and easy to maintain as your application grows. No matter the fact whether you want to use only a basic live chat or include advanced functions such as tracking sessions and sending notifications, Crisp is the solution that will help connect users with the help desk.

FAQ

1. What is Crisp SDK for React Native?

Crisp SDK is the development kit that gives developers the possibility to introduce Crisp live chat into React Native mobile applications. It provides the ability to provide chat sessions as well as IDs for users, session data, chat events, etc.

2. How do I get the Crisp Website ID?

Log in to your Crisp account and navigate to Settings → Workspace Settings → Setup & Integrations. You can find and copy your Website ID from there.

3. Which package is required to integrate Crisp into React Native?

You can install the Crisp React Native SDK using:

npm install crisp-sdk-react-native

Or:

yarn add crisp-sdk-react-native

For iOS, run pod install inside the ios directory after installing the package.