Note:

1. Sprinklr Messenger for Android supports minimum API 23 without Video Call

2. Sprinklr Messenger for Android supports minimum API 24 with Video Call

3. Gradle version has been updated to 8.3.x and Android Gradle Plugin version has been updated to 8.1.x

Step 1: Install Sprinklr Messenger 

1. Add maven URL with https://clients-nexus.sprinklr.com/ the shared credentials in your root’s build.gradle.

​

2. Force react native version in your root’s build.gradle.

​

3. Add the following dependency to your app's build.gradle file - 

Note: Before you begin, please note that the clients have to change the version when Sprinklr updates the chat app. 

Step 2:  Add Permissions 

We include the INTERNET permission by default as we need it to make network requests- 

​

​

You will need to include the following permissions if you have enabled attachments -

​

Step 3: Initialize the Messenger

Add the following in the onCreate() method of your Application class:

​

- 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.

​

- For Authenticated Users

This step is done after the user logs in successfully and completes the authentication process within the application and after the authentication process, it should be passed in Sprinklr including the app id. In case, a user is not logged in case (s)he has never used the application then an anonymous user can be created for the same. 

After the authentication process, the client should pass the user bean, the application ID, the messenger activity including the information so that Sprinklr can begin the initial setup process in the background.
To initiate the process, following fields are needed -  

1. id

2. firstName

3. lastName

4. profileImageUrl

5. phoneNo

6. email

Note: UserID and Hash are mandatory parameters and hash should be generated for every change in user object. To know the procedure of how to generate Hash, check Step - 11 Generate User Hash

​

- For Authenticated Custom Users​

​

This step is done to create a custom user account using 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 

  SPRMessenger sprMessenger = SPRMessenger.shared();  SPRMessengerConfig config = new SPRMessengerConfig();  config.setAppId("SPR_APP_ID"); // This will be provided by sprinklr  config.setAppKey("com.sprinklr.messenger.release"); // Should be "com.sprinklr.messenger.adhoc" for staging/dev builds. config.setDeviceId("UNIQUE_DEVICE_ID");  config.setPushAppId("SPR_PUSH_ID");  //Unique id, if not sure pass same as device ID  config.setEnvironment("SPR_ENVIRONMENT"); // This will be provided by sprinklr (eg. PROD2)  config.setSkin("MODERN"); // default value is CLASSIC, options: CLASSIC | MODERN  config.setLocale("SPR_LOCALE"); // default value is en config.setThemeMode("DEFAULT"); // default value is DEFAULT, options: DEFAULT | DARK   Map<String, Object> customUser = new HashMap<>();  customUser.put("customAttribute1", "value1"); //Add your custom attribute  customUser.put("customAttribute2", "value2"); //Add your custom attribute  customUser.put("hash","8cf5a3815eedc5305b53f2cb8c1785d46a94abe39cfb15bd26d1e1f75e66056a");  config.setCustomUser(customUser);    sprMessenger.takeOff(this, config);

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.  

Step 4:  Show Messenger

Add the following code in onClick event of the messenger button present inside your application- 

​

Step 5: Messenger Configurations

1) Update user

User attributes can be updated by calling, below is the sample configuration example - 

​

Note: UserID and Hash are mandatory parameters and hash should be generated for every change in user object. 

​

2) Update Custom User 

Custom User attributes can be updated by calling, below is the sample configuration example: 

​

3) Update language

To update the user language use below function:

​

​

Sprinklr messenger 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 logout.

​

5) Add support of video player

• Install video player and react native

• Add video package to the messenger config

​

[OPTIONAL]: If your app uses exo player and face build issues, install react-native-video instead of react-native-video-exoplayer

6) Customize Messenger landing screen

By default messenger view is opened with a messenger home page showing all conversations but you can customize the default behaviour and can launch MessengerView with a single conversation view as well. Single conversation view behavior can also be customized as explained below:

​

• Open single conversation view with new conversation

For your use case, if you want to skip the previous conversation history and directly want to open the single conversation view with new conversation then you can open MessengerView as shown below:

• Open single conversation view with previous conversation history

If you directly want to open single conversation view with previous conversation history then you can open MessengerView as shown below:

​Note: landingScreen: "LAST_CONVERSATION allows brands to get users to land the customer on the last interacted open conversation. If there are no open conversations, the customer lands on a new conversation window

​

• Open single conversation view with a particular conversation id

If you directly want to open single conversation view with a particular conversation then you can open MessengerView as shown below:

​

• Open live chat along with initiating a Video Calling

To directly open the conversation view and initiate a video call, you can proceed as follows:

• Open live chat along with initiating an audio call

To directly open the conversation view and initiate an audio call, you can proceed as follows: 

7) 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, 

i) Create the case custom fields and note down their field name →  (Right now it’s not possible to get the field name of custom fields from UI, you can work with support to get the relevant field name of the custom fields).

ii) Pass conversationContext to chatInitialisationContext* when opening a new conversation directly (5ea7fa9e87651f356209878f and 5eb7fa9e87651f356219348e are the two custom field names). All the field values should be passed as an array of strings.

​

* Note: chatInitialisationContext is explained in previous section

8) 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 all conversations started by the user.

To achieve this,

1. Create the case custom fields and note down their field name → (Right now it’s not possible to get the field name of custom fields from UI, you can work with support to get the relevant field name of the custom fields).

2. You can pass these values in clientContext in the takeOff method called in step 5.  (5e281d040844e435b is the custom field name). All the field values should be passed as an array of strings.

3. You can also update the client context on run time by calling the following method: All the field values should be passed as an array of strings.

9) 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). 

​

​

​

10) 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.

 ​

​

11) Close Messenger

You can close messenger from the main application by calling closeMessenger

​

12) Add Delegate to listen to external events from messenger

​

13) 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,  

​

• Call the the below function to get the number of open conversations

​

​

• Add Delegate to listen to the output of above function  

​

14) Get number of unread messages 

You can keep track of changes in the total number of unread messages in conversations by using a delegate that accepts responses of type SPRMessagesCountResponse. This way, 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. 

​

You can also trigger the event to get the current unread messages count by calling following method: 

​

​

Note: You would receive the current unread messages count response in the onUpdateUnreadMessagesCount method of the delegate you attached earlier. 

​

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

​

​

16) Add Messenger Events Listener to SDK events 

The following events can be listened: 

​

​

17) 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.

​

The following log levels are maintained:

SPR_OFF(0), SPR_FATAL(1), SPR_ERROR(2), SPR_WARN(3), SPR_INFO(4), SPR_DEBUG(5), SPR_TRACE(6), SPR_ALL(7);

​

18) Update Theme Mode for User on demand

 You can update the theme mode ondemand:

​

Note: Upon invoking the updateThemeMode() method, a confirmation alert will prompt the user to reload the app for the changes in theme to take effect. Furthermore, the parent application should send the updated theme within the configuration while chat initialization

​

19) Configure your Status Card

Note: To get this capability enabled, please reach out to our support team at tickets@sprinklr.com, providing the live chat application ID. Status Card can be enabled only if you are using the modern skin version of live chat widget.

​

Using Status Cards, you can update your customers about the health of a key resource. This key resource could be a tool or service that they interact with frequently. By showing the status of this resource directly, customers don’t have to reach to agents repeatedly. Hence, this improves the customer experience while reducing agent workload.

​

Once status card is enabled for your Livechat widget, you can update the status card by using the following:

​

You can use the following placeholders for title and description:

1. %%[updatedAt] --> Placeholder for formatted time

2. %%[status] --> Placeholder for Status, mentioned below in the table as SPRStatus

​

​

20) Disable Attachments for Customer

 You can prevent customers from adding attachments in the chat by hiding the attachment icon from the chat widget.

To do this, you can pass disableAttachment:true in the takeOff method

​

21) Integrate Your Brand's Custom Header in Live Chat 

Enhance your live chat experience by incorporating your own custom header. This allows you to replace Live Chat default header with one that aligns with your brand identity, creating a consistent and seamless experience for your users. 

22) Implement Back Button Handling to Control Hardware Back Button 

 Utilize the below method to handle the back action within your chat application. This function allows users to seamlessly navigate back to the previous screen, enhancing the overall user experience by providing intuitive and efficient navigation 

23) Close Conversation 

 Use the method below to close a conversation on live chat. This feature allows brands to efficiently handle conversation endings, providing control over when and how interactions are closed. 

Apply this method only on the conversation screen when the case is open to ensure a seamless transition for users as conversations end. 

​

23) Close All Conversations 

Use the method below to close all conversation on live chat. This option is visible to users with open cases, if there are no cases or all existing cases are already closed then user will not be able to see this option.

24) Delete Conversation 

Use this method to delete a conversation in live chat. This feature allows brands to efficiently remove interactions as needed, providing control over conversation deletions.  

Apply this method only on the conversation screen to manage deletions effectively. 

25) Delete All Conversations 

Use this method to delete all the conversations in live chat. This feature allows brands to efficiently remove interactions as needed, providing control over conversation deletions. Apply this method only on the home screen to manage deletions effectively. 

26) Clear User Session

You can now enable users to clear their session details. When a user clears their session, any new conversations will be treated as if they are from a completely new user. This feature is especially useful for users interacting with your brand in public spaces or over a public network.

​

Step 6: Push Notifications

For more details on mobile push notifications, please refer here​

Prerequisite

1. Google service.json file

Note:

• Google service.json file can be different for sandbox/prod env.

• If the Google service.json file is different sandbox/prod env and you are testing the push notification setup on prod mobile application, plesae ensure to use Android release build

Configuration

To enable push notifications on Android(ARN Setup), please raise a support ticket to tickets@sprinklr.com with the following information:

1. Google service.json file

2. Live Chat AppID

3. Partner ID

4. Env

1) Register/Unregister for push notifications- 

You can register the messenger for sending push notifications by providing push token received from apns/fcm as below:

​

You can unregister for messenger push notifications by sending empty token as below:

2) Handle Messenger Push Notifications

• Once you have registered for messenger push notifications then you might receive notifications from your platform as well as messenger. To check if notification is messenger notification you can check as below:

• Once you have identified if the notification is messenger notification you need to follow the below step to handle push notification.

• You can now open the conversation screen directly from a push notification when the app is in the background and the Messenger SDK is mounted.

​

3) Open Live Chat Messenger

Open live chat view with initial notification: Messenger view can be presented with initial notification as the result of opening from notifications or in-app notification banners:

​

4) Controlling Push Notification Permissions

Note: Below Step 1 and Step 2 should be done before takeOff()

Prior to initializing the Messenger, you have the option to contol push notifications based on the user's app settings and permission request, provided your app has already obtained permission from the user.

1) To deactivate the push notifications according to the user’s application setting or if the user has not granted notification permission to your application:

2) The live chat application will never request notification permission again if it has already been granted. When your application has not obtained notification permissions and if you also wish to prevent the live chat application from requesting notification permission when 'takeOff' is called, you can set the 'autoRequestPermission' parameter to false.

3) Whenever the user has granted notification permission to your application, we need to ensure that the push notifications for live chat application are also enabled. To do this:

​

5) Customizing Notification preferences 

Brands can customize various aspects of Push notifications.  

1. Customize the icons according to your preference 

Brands have the flexibility to customize the small, large, and call icons for Push notifications based on their preferences. Please find the relevant code below for reference. 

​

​

2. Customize Sound for Push Notifications 

Brands have the option to enable a custom sound for their Push notifications. Please find the relevant code below for reference. 

​

3. Disable Sound 

Brands have the option to disable sound for Push notifications based on their preferences. Please find the relevant code below for reference. 

​

Step 7: In-App Push Notifications

In-app notifications are messages or alerts displayed within a mobile application itself, rather than on the device's main notification tray or lock screen. These notifications are specifically tailored to communicate information directly to the user while they are actively engaged with the app. 

1) Enable/Disable In-App Notifications 

By default, in-app notifications are enabled. To disable or enable in-app notifications again for Sprinklr Live Chat, please contact Sprinklr Support at tickets@sprinklr.com. Be sure to raise separate support tickets for sandbox and production environments. 

2) Customizing Notification preference 

Brands can customize various aspects of In-App notifications. To configure these settings, please refer to the code provided below: 

1. Customize the small, large and call icons according to your preference 

Brands have the flexibility to customize the small, large, and call icons for In-App notifications based on their preferences. Please find the relevant code below for reference. 

2. Customize Sound for Push Notifications 

Brands have the option to enable a custom sound for their In-App notifications. Please find the relevant code below for reference.

3. Disable Sound  

Brands have the option to disable sound for In-App notifications based on their preferences. Please find the relevant code below for reference.

Step 8: Enable SSL Pinning 

Enable SSL Pinning and Public key provided by sprinklr by creating SPRSSLPinning object and pass it to SPRMessengerConfig 

 Note: Please raise a support ticket to tickets@sprinklr.com for generating the Public Key

Step 9: Taking video call on messenger

Note: Please follow the below Step 8 - Taking video call on messenger if you are using Video Calls

​

Video call is a feature that allows brands to make video calls on the mobile application. Video calls can be initiated by agents. Sprinklr provides video call solution in integration with 1 vendor as of today i.e. with Zoom.

​

Pre-Requisites

1. Zoom account

2. Permission to access to care console in the Sprinklr platform

Note: You can enable Zoom account to make and receive video calls by reaching out to Sprinklr support at tickets@sprinklr.com​

​

Pricing

1. Video call solution has a usage-based pricing i.e. per minute per participant costs. Eg- a call between an agent and a customer makes 2 participants

2. Zoom charges $0.0034 per minute per attendee (one attendee is an agent and the other is a customer)

Note: 

• Checkout out permission which is required for video call in Step 2 

• Step 6 is mandatory for this

• Sprinklr Messenger for Android supports minimum API 24 with Video Call 

​

1. Install zoom sdk and react native

   implementation 'com.sprinklr.externals:zoom-react-native-videosdk:1.11.0' implementation 'com.facebook.react:react-android:0.74.5'

2. Add video package to the messenger config 

   import com.reactnativezoom.videosdk.RNZoomVideoSdkPackage;  // import statement for zoom sdk package

   ​

3. Create config for takeOff as done in Step 3

   SPRMessenger sprMessenger = SPRMessenger.shared();   SPRMessengerConfig config = new SPRMessengerConfig();   config.setAppId("SPR_APP_ID"); // This will be provided by sprinklr   config.setAppKey("com.sprinklr.messenger.release");  // Should be "com.sprinklr.messenger.adhoc" for staging/dev builds. config.setDeviceId("UNIQUE_DEVICE_ID");   config.setPushAppId("SPR_PUSH_ID"); //Unique id, if not sure pass same as device ID   config.setEnvironment("SPR_ENVIRONMENT"); // This will be provided by sprinklr (eg PROD2)   config.setLocale("SPR_LOCALE"); // default value is en config.setThemeMode("DEFAULT"); // default value is DEFAULT, options: DEFAULT| DARK ​ sprMessenger.takeOff(this, config);

     

4. Pass RNZoomVideoSdkPackage 

   config.setExtraPackages(new ArrayList<>(Arrays.asList(      new RNZoomVideoSdkPackage()  )));

   ​

5. Pass video call provider to SPRMessengerConfig 

   config.setVideoCallProvider(SPRVideoCallProviders.ZOOM);

   ​

6. Set theme color to display accept call action icon in call view

   SPRThemeConfig themeConfig = new SPRThemeConfig();  themeConfig.setPrimaryColor(Color.parseColor("#0828cc")); // Default Value is black  themeConfig.setSecondaryColor(Color.parseColor("#0828cc")); // Default Value is white if primary color is on darker side and black if primary color is on lighter side    config.setThemeConfig(themeConfig);

   ​

7. Call takeOff with all the configs defined above 

   sprMessenger.takeOff(this, config);

   ​

Step 10: Enable Co-Browsing

Co-browsing will allow agents to get full visibility into the customer’s screen, enabling them to guide customers through product purchases, complex form filling, or confusing information on mobile application. For more details, please refer here.

Prerequisite

To enable co-browsing, please raise a support ticket at tickets@sprinklr.com with the following details

• Partner Name

• Partner ID

• Concurrent co-browsing sessions expected

• Number of agents who will be using co-browsing (Concurrent sessions)

1) Install co-browsing sdk and react native

2) Add Co-Browsing package to the messenger config

3) Create config for takeOff as done in Step 3

4) Pass Co-Browsing Package and set co-browsing flag to true

​

Step 11: Generate User Hash

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 -

userId_firstName_lastName_profileImageUrl_phoneNo_email

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

12345_John_Doe_https://example.com/profilePic.jpg_9876543210_John.Doe@example.com

Sample function to generate hash in Java -