Set Up Video Calling for React Native
Updated
Brands can integrate video calling into their mobile apps through Sprinklr Messenger. This guide explains how to integrate and configure video calling in Sprinklr Messenger for React Native using the Amazon Chime SDK.
Prerequisites
To integrate AWS Chime, ensure the following prerequisites are met:
AWS account with the Chime SDK enabled.
If you want to enable video recording, you need an S3 bucket associated with your AWS account to store Chime-side recordings.
AWS account number to process video call recordings.
Permission to access Care Console in the Sprinklr platform.
Note: You can enable AWS Chime account to make and receive video calls by reaching out to Sprinklr support at tickets@sprinklr.com.
Installation
1. Install the AWS Chime SDK.
Add the following package dependency to your package.json file:
"@sprinklrjs/chime-video": "2.0.1"2. Register the video call provider.
In your application entry point, register the video call provider with the Messenger SDK before calling the takeOff method:
MessengerClient.registerVideoCallProviderConfig({provider: 'AMAZON_CHIME',});
Configuring Push Notifications
You can configure push notification handling on Android and iOS, so that incoming calls and call notifications work properly.
Android
For Android, follow these steps:
Step 1: Create MessengerPushService
This service is responsible for handling incoming push notifications. The implementation differs based on the notification library being used.
If using react-native-firebase, extend ReactNativeFirebaseMessagingService in your MessengerPushService.
The following is an example code. A similar Service class can be created for any other push notifications library as well.
Example:
package com.messengerexample;import android.util.Log;import com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService;import com.google.firebase.messaging.RemoteMessage;import com.sprinklr.messenger.SPRMessengerController;import java.util.Map;public class MessengerPushService extends RNPushNotificationListenerService {private static final String TAG = "MessengerPushService";@Overridepublic void onMessageReceived(RemoteMessage remoteMessage) {Map<String, String> remoteData = remoteMessage.getData();Log.d(TAG, remoteData.toString());if (SPRMessengerController.shared().pusher().canHandlePushEvent(remoteData)) {SPRMessengerController.shared().pusher().handlePushEvent(this, remoteData, MainActivity.class);} else {super.onMessageReceived(remoteMessage);}}@Overridepublic void onNewToken(String token) {super.onNewToken(token);}}
Step 2: Register the Service in AndroidManifest.xml
Add the following to your <application> block:
<serviceandroid:name="<your.package.name>.MessengerPushService"android:exported="false"><intent-filter><action android:name="com.google.firebase.MESSAGING_EVENT" /></intent-filter></service>
Step 3: Link sprinklr-messenger-notifications package
In the settings.gradle file, include the following project:
include ':sprinklr-messenger-notifications'project(':sprinklr-messenger-notifications').projectDir = new File(rootProject.projectDir, '../node_modules/@sprinklrjs/chat-native-client/android/notifications')
In the app/build.gradle file, add the following dependency under the dependencies block:
implementation project(':sprinklr-messenger-notifications')
Step 4: Update the MainApplication.java file
Import the following:
import com.sprinklr.messenger.SPRMessengerController;import com.sprinklr.messenger.config.bean.SPRPusher;import com.sprinklr.messenger.NotificationPreferences;
In the onCreate() method, initialize the SPRMessengerController and optionally configure notification icons:
SPRMessengerController.initialize(SPRPusher::new, this, mReactNativeHost);// optional: to customize notification icons (should be done after SPRMessengerController.initialize)NotificationPreferences notificationPreferences = new NotificationPreferences();notificationPreferences.setSmallIcon(R.drawable.notification_icon); // for notification iconnotificationPreferences.setCallIcon(R.drawable.call_icon); // for call iconSPRMessengerController.shared().pusher().setSPRNotificationPreferences(notificationPreferences);
Step 6: Update the MainActivity.java file
import android.content.Intent;import com.sprinklr.messenger.SPRMessengerController;public class MainActivity extends ReactActivity {// other methods@Overridepublic void onResume() {SPRMessengerController.shared().removeCallNotification(this, this.getIntent());super.onResume();}@Overridepublic void onNewIntent(Intent intent) {super.onNewIntent(intent);SPRMessengerController.shared().removeCallNotification(this, intent);}}
iOS
For iOS, follow these steps:
Step 1: Add VOIP support
Add the following in your Info.plist file:
<key>UIBackgroundModes</key><array><string>remote-notification</string><string>voip</string></array>
Step 2: Implement PKPushRegistryDelegate methods
Support Video Continuity Outside Live Chat Interface
This feature allows users to continue a video or audio call even after they navigate away from the Live Chat interface and return to the host brand application. Without continuity, the video call must be disconnected before leaving the Live Chat interface. With continuity enabled, the call seamlessly continues outside the Live Chat interface.
Platform‑specific continuity behavior is as follows:
Android: Continuity works at the device level, allowing calls to persist outside the parent app.
iOS: Continuity works at the app level, so calls remain active only within the parent application.
Note: To enable Video Call Continuity, contact Sprinklr Support at tickets@sprinklr.com.