This article walks you through the step-by-step process of integrating Sprinklr Messenger (Live Chat) with your mobile app.

​

Compatibility Requirements

Ensure that your setup meets the requirements listed below:

Step 1: Getting Started

1) Install Sprinklr Messenger

Start by downloading the Sprinklr Messenger plugin and saving it to your preferred location. For example, you can place the plugin outside the main directory of your project.

Add the plugin's dependency to your project's pubspec.yaml file under the dependencies section: 

dependencies:   sprinklr_plugin:     path: PATH_HERE​

Replace PATH_HERE with the actual path where the Sprinklr Messenger plugin is located. 

Run the following command:

flutter pub get

 
Note: Please raise a support ticket(tickets@sprinklr.com) or reach out to SM for Sprinklr Messenger Plugin

​

Additional Installation Steps for Android

In the root project’s build.gradle file, add the nexus repository to the repositories block inside allProjects to resolve Sprinklr dependencies.

allprojects {    repositories {        // other repos        maven {            url "https://prod-nexus-external.sprinklr.com/nexus/repository/maven-clients/"            credentials {                username = <MAVEN_USERNAME>                password = <MAVEN_PASSWORD>            }        }    }}

​

In the app module's build.gradle, apply the spr-react-gradle-plugin to configure the native code:

plugins {​    id "com.spr.messengerclient.spr-gradle-plugin.spr-react-gradle-plugin"​}

Also, add the following configure block to run the native build properly:

sprConfig {​    configureNdk = true​}

(Optional) If your project already uses CMake for native builds, additional changes will be required. To make sure you are using CMake already, look for the following snippet in your app/build.gradle:

​

externalNativeBuild {​   cmake {​       path "path/to/CMakeLists.txt"​   }​}

​

Once it is confirmed that your project uses native builds with CMake, add the following code in the CMakeLists.txt file specified above:

# Define the library name here if not already defined​project(appmodules)​# PATH_TO_APP_BUILD_DIR should point to the build directory inside app.​include(${PATH_TO_APP_BUILD_DIR}/spr-react-gradle-plugin/resources/modules/react-native/ReactAndroid/cmake-utils/ReactNative-application.cmake)

​

Parallel to the CMakeLists.txt file, create a file OnLoad.cpp, and add the following code in it:

#include <DefaultComponentsRegistry.h>#include <DefaultTurboModuleManagerDelegate.h>#include <FBReactNativeSpec.h>#include <autolinking.h>#include <fbjni/fbjni.h>#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>#ifdef REACT_NATIVE_APP_CODEGEN_HEADER#include REACT_NATIVE_APP_CODEGEN_HEADER#endif#ifdef REACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER#include REACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER#endifnamespace facebook::react {    void registerComponents(            std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {        // Custom Fabric Components go here. You can register custom        // components coming from your App or from 3rd party libraries here.        //        // providerRegistry->add(concreteComponentDescriptorProvider<        //        MyComponentDescriptor>());        // We link app local components if available#ifdef REACT_NATIVE_APP_COMPONENT_REGISTRATION        REACT_NATIVE_APP_COMPONENT_REGISTRATION(registry);#endif        // And we fallback to the components autolinked        autolinking_registerProviders(registry);    }    std::shared_ptr<TurboModule> cxxModuleProvider(            const std::string& name,            const std::shared_ptr<CallInvoker>& jsInvoker) {        // Here you can provide your CXX Turbo Modules coming from        // either your application or from external libraries. The approach to follow        // is similar to the following (for a module called `NativeCxxModuleExample`):        //        // if (name == NativeCxxModuleExample::kModuleName) {        //   return std::make_shared<NativeCxxModuleExample>(jsInvoker);        // }        // And we fallback to the CXX module providers autolinked        return autolinking_cxxModuleProvider(name, jsInvoker);        return nullptr;    }    std::shared_ptr<TurboModule> javaModuleProvider(            const std::string& name,            const JavaTurboModule::InitParams& params) {        // Here you can provide your own module provider for TurboModules coming from        // either your application or from external libraries. The approach to follow        // is similar to the following (for a library called `samplelibrary`):        //        // auto module = samplelibrary_ModuleProvider(name, params);        // if (module != nullptr) {        //    return module;        // }        // return rncore_ModuleProvider(name, params);        // We link app local modules if available#ifdef REACT_NATIVE_APP_MODULE_PROVIDER        auto module = REACT_NATIVE_APP_MODULE_PROVIDER(name, params);  if (module != nullptr) {    return module;  }#endif        // We first try to look up core modules        if (auto module = FBReactNativeSpec_ModuleProvider(name, params)) {            return module;        }        // And we fallback to the module providers autolinked        if (auto module = autolinking_ModuleProvider(name, params)) {            return module;        }        return nullptr;    }} // namespace facebook::reactJNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {    return facebook::jni::initialize(vm, [] {        facebook::react::DefaultTurboModuleManagerDelegate::cxxModuleProvider =                &facebook::react::cxxModuleProvider;        facebook::react::DefaultTurboModuleManagerDelegate::javaModuleProvider =                &facebook::react::javaModuleProvider;        facebook::react::DefaultComponentsRegistry::        registerComponentDescriptorsFromEntryPoint =                &facebook::react::registerComponents;    });}

​

​

2) Setup for Android 

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

Note: Sprinklr Messenger for Android supports API 24 and above 

​

Prerequisites

Before you begin, ensure the following prerequisites are met:

• Contact Sprinklr Support at tickets@sprinklr.com to obtain your Maven credentials.

  Additionally, this username and password would be same for both Android and iOS

• In your Android project folder, create a file named signing.properties and add the Maven credentials to this file as shown below:

​

MAVEN_USERNAME = <username>MAVEN_PASSWORD = <password>

​

Steps

1. In gradle.properties, add the following properties:

sprMessengerClientVersion = 16.0.0​sprNexusRepositoryUrl = https://prod-nexus-external.sprinklr.com/nexus/repository/maven-clients/

2. In settings.gradle, modify the pluginManagement block to include the custom Nexus repository and plugin:

​

​

pluginManagement{  maven {  url sprNexusRepositoryUrl  credentials {    username = $username    password = $password    }  }}​plugins {          id "com.spr.messengerclient.spr-gradle-plugin" version "16.0.0"      }}

​

3. In the root build.gradle, add the Nexus repository and apply the spr-gradle-plugin for enforcing React Native version:

plugins {      id "com.spr.messengerclient.spr-gradle-plugin"}   

​

Video Player Support

To add support for video player in android, add the following flag to the project’s root level build.gradle file: 

buildscript {    ext {        use_spr_video_player = true    } } 

​

Add Permissions to your project:

We include the INTERNET permission by default as it's required to make network requests:

<uses-permission android:name="android.permission.INTERNET" /> 

Include the following permissions if you are supporting upload and download media functionality and location sharing 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.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" />     <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 

ProGuard Configuration (Code Minification):

If you're using code minification in your Android release build, ensure you update your project's proguard-rules.pro file to include the following rule:

-keep class com.facebook.react.devsupport.** { *; }

​

Confirm your ProGuard file is referenced correctly in the app/build.gradle file:

buildTypes {    release {        minifyEnabled true        proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'    }}

​

3) Setup for iOS

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

​

You can integrate the Live Chat SDK package in your iOS project using CocoaPods.

Prerequisites

Before you begin with the set up, ensure the following prerequisites are met:

• To access the Sprinklr Messenger framework, you need a username and password. Reach out to Sprinklr Support at tickets@sprinklr.com to get the username and password created for your account.

  Additionally, this username and password would be same for both Android and iOS

• You can use the same credentials that you used for clients-cocoapods.sprinklr.com.

• Once you have the username and password, in the root .netrc file, add the following lines:

machine clients-external-cocoapods.sprinklr.comlogin userNamepassword password

​

Install Messenger iOS Dependency

STEP A: Add SPRMessengerClient to your Podfile and run pod install:

target :YourTargetName do​ pod 'SPRMessengerClient', :podspec => 'https://clients-external-cocoapods.sprinklr.com/SPRMessengerClient/16.0.0/SPRMessengerClient.podspec'​end

STEP B: If your app has enabled bitcode, add this pod installer script in your Podfile:

post_install do |installer|   installer.pods_project.targets.each do |target|     target.build_configurations.each do |config|       config.build_settings['ENABLE_BITCODE'] = 'YES'     end   end  end

​

Add Permissions

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

<key>NSCameraUsageDescription</key> <string>Messenger app requires access to the camera to capture the photos.</string> <key>NSMicrophoneUsageDescription</key> <string>Messenger app requires access to the microphone to record video.</string> <key>NSPhotoLibraryUsageDescription</key> <string>Messenger app requires access to the photos library.</string><key>NSLocationWhenInUseUsageDescription</key><string>We need your location to display it on the map.</string>

​

​

Step 2: Initialize the Messenger 

STEP A: Create a SPRMessengerConfig object with the parameters provided by Sprinklr.  

STEP B: Call the SPRMessenger().takeOff() function with SPRMessengerConfig object as an argument. 

For Anonymous Users

For anonymous users (unauthenticated users), you can initialize the messenger using the takeOff method without specifying any user details. Behind the scenes, an anonymous user is automatically created for the messenger and the flow for anonymous user is initialized.

Syntax

SPRMessengerConfig messengerConfig = SPRMessengerConfig(  appId: "SPR_APP_ID", // This will be provided by Sprinklr  environment: "SPR_ENVIRONMENT", // This will be provided by Sprinklr (e.g., PROD)  skin: "MODERN", // This can be either "CLASSIC" or "MODERN"  locale: "en", // default value is en  deviceId: "UNIQUE_DEVICE_ID",  pushAppId: "SPR_PUSH_ID", // Should be Unique id, if not sure pass same as device ID  themeMode: "DEFAULT", // default value is DEFAULT, options: DEFAULT | DARK  disableNetworkHandling: false, // default value is false);​SPRMessenger().takeOff(config: messengerConfig);

Parameters

​

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

Syntax

SPRMessengerUser messengerUser = SPRMessengerUser(  userId: "12345",  firstName: "John",  lastName: "Doe",  phoneNumber: "999999999",  email: "xyz@example.com",  profileImageUrl: "https://images.com.1.png",  hashCreationTime: hashCreationTime, // EPOCH and should be the same one that is used for generating the hash  hash: HmacHashCalculation.generateHash(    data: "12345_John_Doe_https//images.com.1.png_999999999_xyz@example.com_hashCreationTime",    key: "API_KEY", // This will be provided by Sprinklr  ),);​SPRMessengerConfig messengerConfig = SPRMessengerConfig(  appId: "SPR_APP_ID", // This will be provided by Sprinklr  environment: "SPR_ENVIRONMENT", // This will be provided by Sprinklr (e.g., PROD)  skin: "MODERN", // This can be either "CLASSIC" or "MODERN"  locale: "en", // default value is en  deviceId: "UNIQUE_DEVICE_ID",  pushAppId: "SPR_PUSH_ID", // Should be Unique id, if not sure pass same as device ID  themeMode: "DEFAULT", // default value is DEFAULT, options: DEFAULT | DARK  disableNetworkHandling: false, // default value is false  user: messengerUser,);​SPRMessenger().takeOff(config: messengerConfig);

Parameters

User Object

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

• hashCreationTime

• Hash 

Syntax

Map<String, Object> customUser = {  "customAttribute1": "value1", // Add your own attribute  "customAttribute2": "value2", // Add your own attribute  "hashCreationTime": hashCreationTime, // EPOCH and should be the same one that is used for generating the hash  "hash": HmacHashCalculation.generateHash(    data: "value1_value2_hashCreationTime", // String    key: "API_KEY", // This will be provided by Sprinklr  ),};​SPRMessengerConfig messengerConfig = SPRMessengerConfig(  appId: "SPR_APP_ID", // This will be provided by Sprinklr  environment: "SPR_ENVIRONMENT", // This will be provided by Sprinklr (e.g., PROD)  skin: "MODERN", // This can be either "CLASSIC" or "MODERN"  locale: "en", // default value is en  deviceId: "UNIQUE_DEVICE_ID",  pushAppId: "SPR_PUSH_ID", // Should be Unique id, if not sure pass same as device ID  themeMode: "DEFAULT", // default value is DEFAULT, options: DEFAULT | DARK  disableNetworkHandling: false, // default value is false  customUser: customUser,);​SPRMessenger().takeOff(config: messengerConfig);

Parameters

Custom User Object

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 3: Show Messenger 

Add the following code with the button present inside your application- 

​

Step 4: Messenger Configurations 

1) Update User 

To update user information, create a new SPRMessengerUser object and pass it to the SPRMessenger().updateUser() function as shown below: 

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

​

2) Update Custom User 

To update user information, create a new customUser object and pass it to the SPRMessenger().updateCustomUser() function as shown below: 

​

3) Update Language 

To update the user's language preference, you can use the SPRMessenger().updateLocale() function like this: 

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 log out the user and perform data cleanup by calling as shown below: 

5) Customize Messenger Landing Screen 

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

The following section lists the customization you can do with the defaul 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 ways you can customize the default view according to 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 ways you can customize the single conversation view according to 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: (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. Create a Map<String, List<String>> called conversationContext to represent the context you want to capture.

   For example: In this example, "5ea7fa9e87651f356209878f" and "5eb7fa9e87651f356219348e" are the two custom field names with corresponding values. 

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

   Map<String, List<String>> conversationContext = {  "5ea7fa9e87651f356209878f": ["laptop"],  "5eb7fa9e87651f356219348e": ["inquiry"]  };

​

*Note: chatInitialisationContext is explained in previous section 

​

7) Capture Customer Context from the Application on All Cases of the User 

There may be times when you want to pass contextual information in case custom fields for all conversations initiated by a user. 

To achieve this, follow these steps: 

1. Create the Case Custom Fields: Note down the field names for your case custom fields. Currently, it is not possible to obtain the field names of custom fields from the user interface. You can work with Sprinklr support to get the relevant field names for your custom fields. 

2. Pass Customer Context in the Initial Configuration: You can pass clientContext during the initialization phase by including it in the takeOff method. Here's an example: 

   Map<String, List<String>> clientContext = {  "5ea7fa9e87651f356209878f": ["laptop"],  "5eb7fa9e87651f356219348e": ["inquiry"]  };    SPRMessengerConfig messengerConfig = SPRMessengerConfig(  // rest config,  clientContext: clientContext,  );

   ​

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

   Map<String, List<String>> clientContext = {  "5ea7fa9e87651f356209878f": ["laptop"],  "5eb7fa9e87651f356219348e": ["inquiry"]  }; ​ SPRMessenger().updateClientContext(clientContext: clientContext)

   ​

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: 

   Map<String, List<String>> context = {  "5ea7fa9e87651f356209878f": ["laptop"],  "5eb7fa9e87651f356219348e": ["inquiry"]  };    SPRMessenger().updateConversationContext(     conversationContext: {"context": context}, );

   ​

​

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: 

   Map<String, List<String>> userContext = {  "5ea7fa9e87651f356209878f": ["laptop"],  "5eb7fa9e87651f356219348e": ["inquiry"]  };  SPRMessenger().updateUserContext(userContext: userContext);

   ​

​

10) Close Messenger 

You can close messenger from the main application by calling: 

​

11) Add Delegate to Listen to External Events from Messenger 

​

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

   SPRMessenger().getNumberOfOpenConversations();

   ​

2. Add Delegate to listen to the output of above function 

   void onUpdateNumberOfOpenConversations(int numOfOpenConversations) {  // Your function body  }    SPRMessengerDelegate messengerDelegate = SPRMessengerDelegate(  onUpdateNumberOfOpenConversations: onUpdateNumberOfOpenConversations,  );    SPRMessenger().setMessengerDelegate(        messengerDelegate: messengerDelegate,  );

   ​

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

1. Call the the below function to get the number of unread messages  

   SPRMessenger().getUnreadMessagesCount();

   ​

2. Add Delegate to listen to the output of above function  

   void onUpdateUnreadMessagesCount(Map response) {  // Your function body  }    SPRMessengerDelegate messengerDelegate = SPRMessengerDelegate(  onUpdateUnreadMessagesCount: onUpdateUnreadMessagesCount,  );    SPRMessenger().setMessengerDelegate(        messengerDelegate: messengerDelegate,  );

   ​

Note: Please define and use MessengerDelegate function together to fetch number of open conversations count, external events and number of unread messages count. 

​

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.

The following log levels are maintained:

SPR_OFF, SPR_FATAL, SPR_ERROR, SPR_WARN, SPR_INFO, SPR_DEBUG, SPR_TRACE, SPR_ALL

​

17) Update Theme Mode for User on demand

You can update the theme mode on demand:

SPRMessenger().updateThemeMode(themeMode:'DARK'); // options: DEFAULT | DARK 

​

18) 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: