In App Notification

Updated

13 days ago

In-app notifications allow users to receive real-time updates when a message or reply is received from a support agent while the app is in the foreground. These notifications appear as banners at the top of the app, ensuring users do not miss important updates.

You can use either of the following approaches:

The Sprinklr‑provided Messenger Notification Banner.
A customized notification view that matches your app’s design.

The flow diagram below illustrates how in-app notifications are handled, highlighting the SDK methods used at each stage:

Enable/Disable In-App Notifications

Using Sprinklr’s Default Notification Banner

To enable Sprinklr's in-app notification banner, add MessengerNotificationBanner parallel to the root view of your application.

Implementation

import { MessengerNotificationBanner } from '@sprinklrjs/chat-native-client';  function onTapNotificationBanner(notification) {  // open sprinklr messenger view with launch options  const launchOptions = { type: 'NOTIFICATION', data: notification };  presentMessengerView(launchOptions); // provide your presentMessengerView.. we need to open conversation in messenger corresponding to the notification }  function MainApp () {  return (    <>      <RootView />      <MessengerNotificationBanner onTapBanner={onTapNotificationBanner} />    </>  ) }

Disabling In-App Notifications

If you want to disable in-app notifications, avoid adding MessengerNotificationBanner to your UI or handle notifications through custom logic (explained in the next section).

Customizing In App Notification as per Preference

If you prefer a custom notification banner instead of Sprinklr’s default banner, follow these additional steps:

Register a Custom Notification Handler

You need to register your own notification handler to process received notifications and display them in your custom banner.

Note: The handler must be registered only after takeOff has been called.

Implementation

import MessengerClient from '@sprinklrjs/chat-native-client'  // Custom notification handler  function notificationHandler(notification) {      // Implement your custom logic to display notification in your custom banner }  MessengerClient.registerNotificationHandler(notificationHandler)

Notification Object Structure

The notification object follows this format:

{ "data": { "messageId": "<MESSAGE_ID>", "title": "<NOTIFICATION_TITLE>", //live chat account display name "description": "<NOTIFICATION_DESCRIPTION>", //notification message "cId": "<CONVERSATION_ID>", // Conversation Id "imageURI": "<IMAGE_URI>" // Image to display inside the notification banner } }

Field	Type	Description
messageId	String	Unique identifier of the message associated with the notification.
title	String	Title of the notification. Typically, this is the live chat account display name.
description	String	Main content or message of the notification.
cId	String	Unique identifier of the conversation related to the notification.
imageURI	String	URI of the image to be displayed in the notification banner.

Example

import { useState } from 'react'; import CustomBanner from './CustomBanner'; // Your custom component  function App() {   const [notification, setNotification] = useState(null);      useEffect(() => {     // Register custom handler     MessengerClient.registerNotificationHandler((notif) => {       setNotification(notif); // Show your custom banner     });   }, []);      const handleBannerTap = () => {     // Navigate to messenger with notification     navigate('Messenger', {       launchOptions: { type: 'NOTIFICATION', data: notification }     });     setNotification(null); // Hide banner   };      return (     <>       {/* Your app UI */}       {notification && (         <CustomBanner            title={notification.title}           message={notification.description}           imageUri={notification.imageURI}           onPress={handleBannerTap}           onDismiss={() => setNotification(null)}         />       )}     </>   ); }

Additional Resources

See All Integration Steps