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:

• Zoom Video SDK

• Amazon Chime SDK

Installation

Depending on the video call service you want to integrate, see the relevant section:

"@zoom/react-native-videosdk": "2.2.5"

MessengerClient.registerVideoCallProviderConfig({  provider: 'ZOOM',  vendor: require('@zoom/react-native-videosdk'),});

"@sprinklrjs/chime-video": "1.0.0"

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:

​

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";    @Override    public 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);        }    }    @Override    public void onNewToken(String token) {        super.onNewToken(token);    }}​

​

2. Register the Service in AndroidManifest.xml

Add the following to your <application> block:

<service    android:name="<your.package.name>.MessengerPushService"    android:exported="false">    <intent-filter>        <action android:name="com.google.firebase.MESSAGING_EVENT" />    </intent-filter></service>

​

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

​

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

​

5. Update the MainActivity.java file

import android.content.Intent;import com.sprinklr.messenger.SPRMessengerController;public class MainActivity extends ReactActivity {  // other methods  @Override  public void onResume() {    SPRMessengerController.shared().removeCallNotification(this, this.getIntent());    super.onResume();  }  @Override  public void onNewIntent(Intent intent) {    super.onNewIntent(intent);    SPRMessengerController.shared().removeCallNotification(this, intent);  } }

iOS

For iOS, follow these steps:

​

1. Add VOIP support

Add the following in your Info.plist file:

<key>UIBackgroundModes</key><array><string>remote-notification</string><string>voip</string></array>

​

​2. Implement PKPushRegistryDelegate methods:

#import <PushKit/PushKit.h>#import <SPRMessenger/SPRVoipPushNotificationManager.h>@interface AppDelegate () <PKPushRegistryDelegate>@end@implementation AppDelegate  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  {       PKPushRegistry * voipRegistry = [[PKPushRegistry alloc] initWithQueue:dispatch_get_main_queue()];    voipRegistry.delegate = (AppDelegate *)[UIApplication sharedApplication].delegate;    voipRegistry.desiredPushTypes = [NSSet setWithObject:PKPushTypeVoIP];    // other initializations    return [super application:application didFinishLaunchingWithOptions:launchOptions];  }  #pragma mark - PKPushRegistryDelegate methods  - (void)pushRegistry:(PKPushRegistry *)registry didUpdatePushCredentials:(PKPushCredentials *)pushCredentials forType:(PKPushType)type {    [[SPRVoipPushNotificationManager shared] didUpdatePushCredentials:pushCredentials forType:(NSString *)type];  }  - (void)pushRegistry:(PKPushRegistry *)registry didInvalidatePushTokenForType:(PKPushType)type {    [[SPRVoipPushNotificationManager shared] didInvalidatePushTokenForType:(NSString *)type];  }  - (void)pushRegistry:(PKPushRegistry *)registry didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(PKPushType)type withCompletionHandler:(void (^)(void))completion {    if ([[SPRVoipPushNotificationManager shared] canHandleVoipPushEvent: payload]) {      [[SPRVoipPushNotificationManager shared] handleVoipPushEvent:payload forType:type completion:completion];      return;    }  }@end​

import PushKitimport SPRMessenger@UIApplicationMainclass AppDelegate: PKPushRegistryDelegate {    func application(        _ application: UIApplication,        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil    ) -> Bool {        let voipRegistry = PKPushRegistry(queue: DispatchQueue.main)        voipRegistry.delegate = self        voipRegistry.desiredPushTypes = [PKPushType.voIP]        // other initializations        return true    }    // MARK: - PKPushRegistryDelegate    func pushRegistry(        _ registry: PKPushRegistry,        didUpdate pushCredentials: PKPushCredentials,        for type: PKPushType    ) {        SPRVoipPushNotificationManager.shared().didUpdatePushCredentials(pushCredentials, forType: type.rawValue)    }    func pushRegistry(        _ registry: PKPushRegistry,        didInvalidatePushTokenFor type: PKPushType    ) {        SPRVoipPushNotificationManager.shared().didInvalidatePushToken(forType: type.rawValue)    }    func pushRegistry(        _ registry: PKPushRegistry,        didReceiveIncomingPushWith payload: PKPushPayload,        for type: PKPushType,        completionHandler completion: @escaping () -> Void    ) {        if SPRVoipPushNotificationManager.shared().canHandleVoipPushEvent(payload) {            SPRVoipPushNotificationManager.shared().handleVoipPushEvent(payload, forType: type.rawValue, completion: completion)            return        }    }}

​

​

​

​

​

​

​

​

​

​

​

​

​