The Notification Inbox feature allows your users to manage and view all their notifications in one place. By integrating WebEngage, you can easily copy push notifications to your app's Notification Inbox. This approach gives you control over the notification layout while WebEngage passes the notification data to your app, enabling a personalized user experience.

Prerequisites

Before integrating the Notification Inbox, ensure the following:

1. Your app has cordova-plugin-webengage and @awesome-cordova-plugins/webengage installed.

2. If applicable, configure SDK authentication by following the instructions in the SDK Security section before proceeding.

Installation

Step 1: Install Required Dependencies

Install the required libraries in your project by running the following commands:

npm install we-notificationinbox-cordova
npm install @awesome-cordova-plugins/we-cap-inbox

Importing the WECapInbox Plugin

Add this import statement to your file to use the methods provided by the WECapInbox plugin:

import { WECapInbox } from '@awesome-cordova-plugins/we-cap-inbox';

Notification APIs

Fetch Notification Count

The getNotificationCount() function allows you to retrieve the count of unread notifications, making it easier to keep track of pending alerts.

Function Signature

WECapInbox.getNotificationCount()

Return

A Promise that resolves to a string representing the notification count (e.g. "5", "9+").

Usage

import { WECapInbox } from '@awesome-cordova-plugins/we-cap-inbox'
...
//Call the below method to get the Notification count.
function getNotificationCount(){
     WECapInbox.getNotificationCount(function(count: String) {
        console.log("WebEngage: Success! notification count is - ",count)
     }, function(err: any) {
        console.log("WebEngage: Error while fetching notification Count",err)
     })
}

Reset Notification Count

The resetNotificationCount() function is designed to handle the event when the user clicks on the notification icon within the application. Its key functionality is to reset the notification count to 0, signifying that the user has acknowledged and viewed the notifications and that there are no pending unread alerts.

Function Signature

WECapInbox.resetNotificationCount();

Usage

import { WECapInbox } from '@awesome-cordova-plugins/we-cap-inbox'
...
// Function to handle the notification icon click event
function handleNotificationButtonClick() {
    WECapInbox.resetNotificationCount();
}

Fetch Notification List

The getNotificationList function allows you to retrieve the list of notifications from the WebEngage Inbox. It offers pagination support by accepting an offset object as a parameter. By providing different offset values, you can fetch the initial list or subsequent notification items, making it easier to manage and display notifications in your app.

Function Signature

getNotificationList(offsetJSON: offset, callback)

Parameters

Returns

This method returns an NotificationResponse object containing the notificationList. The NotificationResponse object contains two properties:

Usage

Fetch the Initial List of Notifications

import { NotificationResponse, WECapInbox } from '@awesome-cordova-plugins/we-cap-inbox';
...
WECapInbox.getNotificationList(null,
    function (response: NotificationResponse) {
        console.log("Notification List: "+ response.messageList);
    },
    function(err: any) {
        console.error("Error getting notification list: " + err);
    }
);

Fetch the Next Set of Notifications

import { NotificationResponse, WECapInbox } from '@awesome-cordova-plugins/we-cap-inbox';
...
const offset = notificationList[notificationList.length - 1];
WECapInbox.getNotificationList(offset,
    function (response: NotificationResponse) {
        console.log("Notification List: "+ response.messageList);
    },
    function (err: any) {
        console.error("Error getting notification list: " + err);
    });

Single Notification Actions

Mark Read

The markRead() method allows you to mark a specific notification as read within the "Capacitor WebEngage Inbox" library. This function is particularly useful when you want to indicate that a user has seen and acknowledged a particular notification.

Parameters

notificationItem: An object representing the notification item to mark as read.

Usage

WECapInbox.markRead(notificationItem)

Mark Unread

The markUnread() method enables you to mark a specific notification as unread in the "Capacitor WebEngage Inbox" library. By using this function, you can conveniently notify users about important or unread alerts.

Parameters

notificationItem: An object representing the notification item to mark as unread.

Usage

WECapInbox.markUnread(notificationItem);

Mark Delete

The markDelete() method is designed to mark a specific notification for deletion within the "Capacitor WebEngage Inbox" library. This function allows you to handle the removal of notifications that are no longer relevant or required.

Parameters

notificationItem: An object representing the notification item to mark for deletion.

Usage

WECapInbox.markDelete(notificationItem);

Batch Notification Actions

Read All

The readAll() method enables you to mark multiple notifications as read within the "Capacitor WebEngage Inbox" library. This function is particularly useful when you want to acknowledge and mark a batch of notifications as seen by the user.

Parameters

notificationList: An array of notification items to mark as read.

Usage

WECapInbox.readAll(notificationList)

UnRead All

The unReadAll() method allows you to mark multiple notifications as unread in the "Capacitor WebEngage Inbox" library. This function is useful when you want to indicate a batch of notifications as unread for users to revisit and take action.

Parameters

notificationList: An array of notification items to mark as unread.

Usage

WECapInbox.unReadAll(notificationList);

Delete All

The deleteAll() method is designed to delete multiple notifications simultaneously within the "Capacitor WebEngage Inbox" library. This function allows you to efficiently handle the removal of a batch of notifications that are no longer required or relevant.

Parameters

notificationList: An array of notification items to delete.

Usage

WECapInbox.deleteAll(notificationList);

Tracking Events

Track Click

The trackClick() method allows you to track a click event on a specific notification. Trigger this event when a user interacts with the notification by clicking on it, indicating their interest in the content or call-to-action associated with the notification.

Parameters

notificationItem: An object representing the notification item clicked.

Usage

WECapInbox.trackClick(notificationItem);

Track View

The trackView() method enables you to track a view event for a specific notification. Trigger this event when a user views the notification without necessarily interacting with it, providing insights into the reach and visibility of notifications.

Parameters

notificationItem: An object representing the notification item viewed.

Usage

WECapInbox.trackView(notificationItem);