Note: We have changed our package name from @sprinklr/chat-native-client to @sprinklrjs/chat-native-client

1) Install Sprinklr messenger**

Install Sprinklr messenger in your project using package manager (yarn/npm) as mentioned below:

yarn:

npm:

**Note: Sprinklr Messenger is restricted package so you need to configure the following registry in .npmrc for Sprinklr scoped packages:

Replace <SPR_REGISTRY_AUTH_TOKEN> with registry token provided by Sprinklr.

Note: Please raise a support ticket to tickets@sprinklr.com

2) Install Sprinklr Messenger Peer Dependencies*

Additionally install the following peer dependencies in your project as part of Sprinklr Messenger Installation:

• react-native-vector-icons

• react-native-blob-util

• react-native-image-picker

• react-native-video

• react-native-netinfo

• react-native-webview

• react-native-async-storage​

• react-native-clipboard 

• react-native-camera-roll

• react-native-permissions

• react-native-svg​

• ​react-native-reanimated​

​

​

yarn:

npm:

* Please note that listed dependencies also need to be linked natively so it is recommended to follow their documentation for the installation.

And make sure you have the necessary dependencies, and the version should surpass the specified threshold 

• "redux": ">=4.0.0" 

• "react-native": ">=0.70.0" 

• "react-redux": ">=8.0.0" 

• "react": ">=18.2.0" 

• "redux-saga": ">=1.0.1"

• “react-native-permissions" : “>=3.6.0” 

​

In case you have the requirement to use the alternative to a specific dependency or you want to provide custom implementation of your own then refer to this section​

3) Setup for Android

You can skip this step if your app does not support Android.

1. Link Sprinklr Messenger in your project: 

Open android/settings.gradle, and add following lines which will add Sprinklr Messenger and related dependencies to your app.

Open android/app/build.gradle, add this line

Add these lines to MainApplication.java, so that Sprinklr Messenger related packages becomes part of React Native package:

2. Add Permissions in your project: 

Include the following permissions in AndroidManifest.xml if you are supporting upload and download media functionality in messenger:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />  
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/> 

4) Setup for iOS

You can skip this step if your app does not support iOS.

1. Link Sprinklr Messenger in your project: 

Open Podfile, and add following lines which will add Sprinklr Messenger and related dependencies to your app:

2. Add Permissions in your project: 

Include the following permissions in info plist file if you are supporting upload and download media functionality in messenger:

Above permissions are required by Apple for all apps that access the photo library or use the camera/microphone.

​

​

5) Initialize Messenger

Sprinklr Messenger can be initialized for both unauthenticated and authenticated users:

• For Anonymous Users:

For anonymous chats you can initialize the messenger using the takeOff method. Behind the scenes we will automatically create the anonymous user for the messenger and initialize the flow for the same. Please note that the takeOff method should be called once in the application lifecycle. You can use separate methods for updating the user or various information in the messenger which are explained in other sections. For the best performance takeOff should be called at the root of the application or as early as possible in your application flow.

Note: appId, environment and locale are mandatory parameters

• For Authenticated Users: 

For authenticated chats you can initialize the messenger using takeOff method by providing user details. In this flow we will consider provided user’s information for the messenger and initialize the flow for the same. Please note that the takeOff method should be called once in the application lifecycle. You can use separate methods for updating the user or other information or may be for cleanup the messenger which are explained in other section. For the best performance takeOff should be called at the root of the application with user details or as early as possible in your application flow.

Note:

• appId, environment and locale are mandatory parameters but user object should also be passed in takeOff for authenticated chats.

• Also note that the UserID and Hash are mandatory parameters and hash should be generated for every change in user object. To know the procedure to generate hash please refer below “How to generate userHash?” 

• User details are supposed to be concatenated to form a string, separated by underscore as shown below:

•  If you don’t have a few values, you need not send anything but keep the underscores as is. For example, let’s say you don’t have profileimageUrl, there will be 2 underscores after lastName. The string will be as shown below: 

To know the procedure of how to generate Hash, please refer below.

​

• For Authenticated Custom Users: 

This step is done to create a custom user using any custom or specific attributes. In other words, it involves creating user accounts with personalized details or characteristics 
Below is the example to initiate the process with custom attributes and Hash, where you can  pass the attributes values: 

• Custom Attribute 1 

• Custom Attribute 2 

• Hash 

 Note: If you wish to implement a Custom User Authentication Flow, kindly get in touch with the Sprinklr Team to initiate discussions about the implementation process. 

​

How to generate userHash?

The userHash is a generated HMAC or Hash-based Message Authentication Code. For HMAC, Sprinklr uses the sha256 hash function. You need to generate HMAC for the following "string" of user details. User details are concatenated to form a string, separated by underscore as shown below -

So for the above example, the string for which you need to generate the hash would be

Sample code to generate HMAC is mentioned here 

​

Sample Code Generation for Javascript 

​

Note: Make sure you have the necessary dependency, and the version should be within the specified threshold 

• “crypto-js”: "<= 3.3.0”
  Refer here - crypto-js​

6) Present Messenger View

Messenger view can be presented by any of your UI controls (like FAB, Messenger Icon, Tab bar Icon etc) as per your application requirement. For presenting the messenger view create a full page messenger view like below which you can define as a scene in your navigator and present as per your use case: 

LaunchOptions should be provided when messenger need to be opened as a result of notifications etc. Payload structure will be:

7) Present InAppNotificationBanner

To display the messenger notifications to the user when user receive message/reply from support agent and app is in foreground mode then you can show the in-app notification banners at the top inside your app. 

To show in-app banner for messenger related notifications you can either use Sprinklr provided messenger notification banner or you can customize the view as per your requirement.

To use Sprinklr provided in app banner, add MessengerNotificationBanner parallel to root view of the application: 

​

To use your customized banner instead of Sprinklr provided banner you have to follow some additional steps apart from adding your banner at the top:

Register your notification handler to the messenger client so that we provide you the control of received notifications which you can use to display received message information in your custom banner:

Notification object structure will be as follows:

Step 2 - Configurations

1) Update user

User attributes can be updated by calling:

Note: UserID and Hash are mandatory parameters and hash should be generated for every change in user object. To know the procedure to generate Hash, please refer above “How to generate userHash?”  

2) Update Custom User 

Custom User attributes can be updated by calling: 

​

3) Update language

To update the user language use below function:

Sprinklr live chat supports the following languages: Arabic, Bokmal, Chinese, English, Thai, Turkish, Vietnamese, Portuguese, Spanish, Indonesian, Japanese, Korean, French. 

Few languages with limited availability are Albanian, Norwegian, Bosnian, Chinese (traditional), Chinese (honk-kong), Croatian, Czech, Danish, Dutch, Estonian, Finnish, German, Hebrew, Hungarian, Italian, Latvian, Lithuanian, Macedonian, Malayalam, Polish, Romanian, Serbian, Slovak, Slovanian, Swedish.

4) Cleanup

You can logout the user and cleanup the associated data from the application by calling cleanup

5) Customize Messenger Landing Screen 

By default, the messenger view opens with a home page that displays all conversations. However, you can customize this behavior and launch MessengerView with a single conversation view.

The following section describes the customization you can do with the default view and single conversation view:

Default View

Sprinklr Live Chat comprises of two screens: the home screen and the conversation screen. By default, both screens are accessible when Live Chat opens.

The following are the various ways you can configure the default view based on your use case:

Single Conversation View

You can choose to display only the conversation screen, and hide the home screen completely. 

The following are the various ways you can configure the single conversation view based on your use case:

​

6) Capture customer context when starting a new conversation from custom view

When chat is being opened from a custom view, sometimes you might want to capture additional context on the conversation/case. 

Example - A button called “Know More about this laptop”  near a laptop product which opens a chat with a predefined contextual welcome message - “Hi there! It looks like you are interested in buying a laptop”. At the same time, you might want to set the case custom fields indicating the “product category: laptop”, “case type: inquiry”.

To do this, 

1. Create the case custom fields and note down their field name

2. Pass conversationContext to chatInitialisationContext* when opening new conversation directly (5ea7fa9e87651f356209878f and 5eb7fa9e87651f356219348e are the two custom field names)

* Note: chatInitialisationContext is explained in previous section

​

7) Capture customer context from the application on all cases of the user

Sometimes you might want to pass some contextual information in case custom fields for new conversations started by the user. 

To do this,

1. Create the case custom fields and note down their field name. Field Name can be copied from the Sprinklr UI by navigating to Custom Fields -> Click on 3 dots -> Copy Field Name. 

2. You can pass these values in clientContext in the takeOff method called in step 5.  (5e281d040844e435b is the custom field name)

You can also update the client context on run time by calling the following method:

8) Update Conversation Context (Case Custom Field) on Demand 

At times you might want to update the value of conversation context/case custom field during or after a conversation.  

Example: After a purchase is made on the website you might want to set the transaction amount or id on the case for reporting. After doing this, you can attribute sales to each conversation/case.  

To do this,  

1. Create the case custom fields and note down their field name1.  

2. Whenever you want to update the case custom field, call the following JavaScript function (5e291d040844e435b is the custom field name). 

   import MessengerClient from '@sprinklrjs/chat-native-client'    MessengerClient.updateConversationContext({"context": {"5e291d040844e435b": ["Custom Field Value"]}})

   ​

9) Update the profile context within Profile Custom Fields

When chat is being opened from a custom button or hyperlink, sometimes you might want to capture some context on the profile/user during the conversation or after the conversation. To do this, 

1. Create the profile custom fields and note down their field name 

2. Whenever you want to update the profile custom field, call the following JavaScript function and pass the information for profile level custom fields. 
   This can be done via sdk for updating it on-demand 

   import MessengerClient from '@sprinklrjs/chat-native-client'    MessengerClient.updateUserContext({"5e281d040844e435b": ["Custom Field Value"]})

   ​

​

10) Close Messenger

You can close messenger by

​

11) Get number of open conversations

Sometimes you might want to hide the live chat widget based on the number of open conversation. 

To do this,

1. Call the the below function to get the number of open conversations

2. Listent to the output of the above function to get the number of open conversations

​

12) Get Number of Unread Messages

You'll get notified whenever there's a change in the unread message count. It's a convenient way to stay updated on unread message counts in real-time

​

13) Add delegate to listen to external events from messenger

14) Add Messenger Analytics Handler to Listen to tracking events and screen

​

15) Add Messenger Events Listener to SDK events

The following events can be listened:

​

16) Add Events Logger to SDK Events

The provided code snippet establishes a custom logging system which can handle logging events at different levels. This setup enables us to efficiently track and manage various events within the app.