Push Notifications
Updated
Push notifications allow users to receive real-time updates from the Live Chat Messenger, ensuring seamless communication even when the app is running in the background or closed.
Prerequisites
Before configuring push notifications, ensure you have the following:
Android
Google service.json file (specific to each environment - staging/production).
iOS
APNS certificate (P12 format) and its credentials (specific to each environment - staging/production)
OR
P8 Certificate and BundleId, Key, Team Id.
Important Notes:
The Google service.json file must match the respective environment (staging/production).
The APNS certificate (P12 Certificate or P8 Key) and its credentials must be different for staging and production environments.
If testing push notifications on a production iOS application, use TestFlight build.
If the Google service.json file is different sandbox/production environment and you are testing the push notification setup on a production mobile application, please ensure to use Android release build.
If using a different Google service.json file for sandbox/production, ensure TestFlight is used when testing on production (Android).
Configuration
To enable push notifications, please raise a support ticket to tickets@sprinklr.com with the following information:
Google service.json file (for Android).
APNS certificate (P12) and credentials (for iOS) OR P8 Certificate with Key, BundleId, TeamId
Live Chat App ID.
Partner ID.
Target Environment.
1) Register/Unregister for Push Notifications
You must register the Live Chat Messenger to send and receive push notifications. This requires updating the push token received from APNS (iOS) or FCM (Android).
Note: It should be called only after takeOff is completed or livechat is initialized.
Register for Push Notifications
import MessengerClient from '@sprinklrjs/chat-native-client'
MessengerClient.updatePushToken('f30c3b0835ecd378a134c74bce8cea866df8c5b6e12a8c219c9bb288f7270e22')
Unregister from Push Notifications
To stop receiving push notifications, unregister by sending an empty token:
import MessengerClient from '@sprinklrjs/chat-native-client'
MessengerClient.updatePushToken('');
2) Handle Messenger Push Notifications
Once registered, push notifications may be received from both the Messenger and from your application. It is important to distinguish and handle Messenger notifications correctly.
Identify Messenger Notifications
To check if a received notification is from Messenger:
import MessengerClient from '@sprinklrjs/chat-native-client'
let isMessengerNotification = MessengerClient.canHandlePushNotification(notification);
// Returns true if it's a Messenger notification, otherwise false.
Displaying Messenger Notifications
When a push notification is received and identified as Messenger Push Notification, follow these steps to display it:
import MessengerClient from '@sprinklrjs/chat-native-client';
// Handle incoming push notifications
function onNotificationReceived(notification) {
if (MessengerClient.canHandlePushNotification(notification)) {
if (!notification.foreground) {
// If the app was in the background or killed, navigate to the corresponding conversation
handleMessengerPushNotification(notification);
}
return;
}
// Handle other platform notifications
}
Open Messenger on Click of Push Notification
Call the below method once the user clicks on push notification. It will redirect you to the conversation screen of Live Chat.
// Open Messenger conversation for the received Messenger push notification
function handleMessengerPushNotification(notification) {
if (MessengerClient.isMessengerMounted()) {
MessengerClient.handlePushNotification(notification);
} else {
// Open Messenger view with launch options
const launchOptions = { type: 'NOTIFICATION', data: notification };
presentMessengerView(launchOptions);
}
}
// provide your configured presentMessengerView function to open conversation in messenger corresponding to the notification
By correctly registering for push notifications and distinguishing Messenger notifications, you can enhance the user experience within your mobile app.
Additional Resources