Set Up Live Chat Messenger
Updated
To set up Sprinklr Messenger, you need to link the Sprinklr Messenger in your project and add the necessary permissions.
Setup for Android
To setup Sprinklr Messenger, follow these steps:
Link Sprinklr Messenger in Your Project
You can link Sprinklr Messenger in your project with autolinking or without autolinking. Autolinking automatically links the peer dependencies in your project with Sprinklr Messenger.
Note: Sprinklr Messenger supports the React Native New Architecture. If you are using the new architecture, it is recommended to use autolinking to link Sprinklr Messenger in your project.
See the relevant section for steps:
Autolinking Enabled
1. In android/settings.gradle, add the following lines. This will add Sprinklr Messenger and related dependencies to your app.
include ':spr-native-kit'
project(':spr-native-kit').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/native-kit/android')
2. In MainApplication.java, add the following lines to make Sprinklr Messenger related packages a part of React Native package:
To enable autolinking, pass true as value to the getPackages method.
import com.sprinklr.messenger.SPRMessengerPackagesProvider
@Override
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages = new ArrayList<>(Arrays.asList(
...{YOUR_NATIVE_PACKAGES}
));
packages.addAll(SPRMessengerPackagesProvider.getPackages(true)); // send false to disable automatic linking, send true or nothing to enable autolinking
return packages;
}
Autolinking Disabled
1. In android/settings.gradle, add following lines. This will add Sprinklr Messenger and related dependencies to your app.
include ':@sprinklr-chat-native-client'
project(':@sprinklr-chat-native-client').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/chat-native-client/android')
include ':spr-native-kit'
project(':spr-native-kit').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/native-kit/android')
2. In android/app/build.gradle, add the following line:
dependencies {
implementation project(':@sprinklr-chat-native-client')
}
3. Add these lines to MainApplication.java. This will make Sprinklr Messenger’s related packages a part of the React Native package:
import com.sprinklr.messenger.SPRMessengerPackagesProvider
.
.
@Override
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages = new ArrayList<>(Arrays.asList(
...{YOUR_NATIVE_PACKAGES}
));
packages.addAll(SPRMessengerPackagesProvider.getPackages());
return packages;
}
Add Permissions to Your Project
If you are supporting media upload/download and location sharing features in messenger, include the following permissions in AndroidManifest.xml:
Permission | Description | Required/Optional | Android API Level | Scope |
android.permission.READ_EXTERNAL_STORAGE | Allows an app to read from external storage. | Required | API Level < 29 | Media Download |
android.permission.WRITE_EXTERNAL_STORAGE | Allows an app to write to external storage. | Required | API Level < 29 | Media Download |
android.permission.CAMERA | Allows an app to access the device camera. | Optional Only required if video call feature is being used. | All supported API Level | Video Calling |
android.permission.RECORD_AUDIO | Allows an app to record audio. | Optional Only required if video call feature is being used. | All supported API Level
| Video Calling |
android.permission.POST_NOTIFICATIONS | Allows an app to send notifications to the user. | Optional Only required if messenger push notifications are to be shown | All supported API Level
| Push Notifications |
android.permission.ACCESS_FINE_LOCATION | Allows an app to access the location of the user. | Optional Only required if location sharing feature of Live Chat is used. | All supported API Level
| Location Sharing |
android.permission.ACCESS_COARSE_LOCATION | Allows an app to access the approximate location of the user. | Optional Only required if location sharing feature of Live Chat is used.
| All supported API Level
| Location Sharing |
Example
<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"/>
Setup for iOS
To setup Sprinklr Messenger in iOS, follow these steps:
Link Sprinklr Messenger in Your Project
In Podfile, add the following lines. This will add Sprinklr Messenger and related dependencies to your app:
pod 'SPRMessenger', :path => '../node_modules/@sprinklrjs/chat-native-client/SPRMessenger.podspec'
pod 'SPRNativeKit', :path => '../node_modules/@sprinklrjs/native-kit/SPRNativeKit.podspec' # Add this pod manually if not linked automatically via react native auto linking
Add Permissions to Your Project
If you are supporting upload and download media functionality in messenger, include the following permissions in the info.plist file:
Note: These permissions are required by Apple for all apps that access the photo library or use the camera/microphone.
Permission | Description | Required/Optional | IOS version | Scope |
NSCameraUsageDescription | Allows an app to access the device camera. | Optional Only required if video call or media (videos/images) sharing feature is being used in Live Chat. | All iOS versions | Video Call Media Upload |
NSMicrophoneUsageDescription | Allows an app to access the microphone. | Optional Only required if video call or video sharing feature is being used in Live Chat. | All iOS versions
| Video Call Media Upload |
NSPhotoLibraryUsageDescription | Allows an app to access the photo library. | Optional Only required if media from gallery sharing feature is being used in Live Chat. | All iOS versions
| Media Upload |
NSLocationWhenInUseUsageDescription | Allows an app to access location of the user.
| Optional Only required if location sharing is being used in Live Chat. | All iOS versions
| Location Sharing |
Example
<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>
Next Step
Additional Resources