Install Live Chat Messenger and Peer Dependencies
Updated
To integrate Sprinklr Live Chat Messenger into your project, you must install the Live Chat SDK along with its necessary peer dependencies. This section provides a step-by-step guide to install Live Chat Messenger and its necessary dependencies.
Prerequisite
Before you begin with the installation, ensure that the following prerequisite is met:
Configure Sprinklr Messenger Registry
Sprinklr Live Chat Messenger is a restricted package. Therefore, you need to configure the following registry in .npmrc for Sprinklr scoped packages:
@sprinklrjs:registry=https://prod-nexus-external.sprinklr.com/nexus/repository/npm/
always-auth=true
_auth=<SPR_REGISTRY_AUTH_TOKEN>
Note: <SPR_REGISTRY_AUTH_TOKEN> is the registry token provided by Sprinklr. To get the registry token, raise a support ticket at tickets@sprinklr.com.
Install Sprinklr Messenger
Note: The Live Chat package name has been updated from @sprinklr/chat-native-client to @sprinklrjs/chat-native-client.
Install the Sprinklr Messenger in your project using your preferred package manager, as shown in the following commands:
Using yarn
yarn add @sprinklrjs/chat-native-client@11.0.0 Using npm
npm install --save @sprinklrjs/chat-native-client@11.0.0
Install Sprinklr Messenger Peer Dependencies
Sprinklr Live Chat Messenger supports the peer dependencies listed in the Supported Peer Dependencies table. You can install these dependencies as part of the Sprinklr Messenger installation.
In addition to installing these dependencies, they also need to be linked natively. To properly link them, refer to their official documentation. Additionally, verify that you have all the required dependencies and that their versions meet the specified threshold in the Supported Versions column of the Supported Peer Dependencies table.
If you need to use an alternative to a specific dependency or implement a custom solution, refer to the Customize Peer Dependencies section for guidance.
Supported Peer Dependencies
The following sections provide an overview of the supported peer dependencies and their respective details:
State Management
Peer Dependency | Description | Supported Versions |
JavaScript library for predictable and maintainable global state management | 4.0.0 or later | |
Facilitates the connection between React components and the Redux store | 8.0.0 or later | |
Handles side effects in Redux applications, such as data data fetching and impure things like accessing the browser cache | 1.0.1 or later | |
A library for creating memorized "selector" functions |
React Native UI Components
Peer Dependency | Description | Supported Versions |
Core library for building cross-platform mobile applications using React | 0.70.0 or later | |
JavaScript library for building UIs, base for React Native | 18.2.0 or later | |
A customizable chat UI library for React Native | ||
Allows rendering of HTML content within a React Native app | ||
Provides SVG support in React Native applications | ||
A library for using vector icons in React Native apps | ||
Enables video playback within React Native applications | ||
A component to render web content in a React Native app |
Utility Libraries
Peer Dependency | Description |
A library for JavaScript functional programming | |
A modern JavaScript utility library delivering modularity, performance & extras | |
A helper library for creating immutable data structures | |
A date library that parses, validates, manipulates, and displays dates/times | |
Handles binary data within the app | |
Immutable color conversion and manipulation | |
JavaScript library of crypto standards | |
JavaScript library for RSA encryption | |
MQTT client library for Node.js and browser | |
Provides information about and control over the current node.js process | |
Used for type checking React props | |
An implementation of the Node.js EventEmitter class |
React Native Community Libraries
Peer Dependency | Description |
An asynchronous, unencrypted, persistent, key-value storage system for React Native | |
It provides access to the local camera roll or photo library | |
Allows access to the device's clipboard | |
It allows you to get information on Connection type and Connection quality | |
Handles push notifications on iOS |
Additional React Native Features
Peer Dependency | Description | Required/Optional | Supported Versions |
Handles data transfer and file system access | |||
This plugin provides client-side integration for the CodePush service, allowing you to easily add a dynamic update experience | |||
A React Native module that allows you to select a photo/video from the device library or camera | |||
This React Native package allows you to prevent the screen from going to sleep while your app is active | |||
A unified permissions API for React Native on iOS, Android | 3.6.0 or later | ||
Manages local and remote notifications | |||
React Native Reanimated is a powerful animation library built. With Reanimated, you can easily create smooth animations and interactions that run on the UI thread. Install only if you want to support animations and transitions for messages in Live Chat. | Optional | ||
This library includes Map components for iOS and Android. Install only if you want to support the location sharing feature in Live Chat. | Optional |
Install Peer Dependencies
You can use the following yarn or npm command to install the peer dependencies:
Using yarn
yarn add <package-name> Example
yarn add react-native-vector-icons react-native-blob-util react-native-image-picker react-native-video @react-native-community/netinfo react-native-webview react-native-permissions @react-native-camera-roll/camera-roll @react-native-async-storage/async-storage @react-native-clipboard/clipboard react-native-svg react-native-reanimated Using npm
npm install <package-name> Example
npm install --save react-native-vector-icons react-native-blob-util react-native-image-picker react-native-video @react-native-community/netinfo react-native-webview react-native-permissions @react-native-camera-roll/camera-roll @react-native-async-storage/async-storage @react-native-clipboard/clipboard react-native-svg react-native-reanimated