Blog

App Inbox Integration

Suggest Edits

App inbox is essentially a screen within an app where all your notifications will be listed. App inbox offers you a way to make your push notifications persistent that users can refer back at any point.

👍

Read more about how app inbox feature works here. And reach out to your account manager to enable this feature.

This guide will explain how to integrate app inbox.

For Android SDK

Step 1 : Define Latest SDK version

Add below line in gradle.properties

// Version of smartech appinbox SDK to use with React Native
SMARTECH_APPINBOX_SDK_VERSION=<<appinbox_sdk_android_version>>

Step 2: Integrate the latest CEE SDK

Make the following changes in the app-level build.gradle

api "com.netcore.android:smartech-appinbox:${SMARTECH_APPINBOX_SDK_VERSION}"

Step 1: Complete the setup for CEE and SmartPush SDK for React Native

Go to Basic Setup to complete the basic setup of CEE SDK.Go to Customer Engagement to complete the setup of SmartPush SDK, used for push notifications.

Step 2: Installing Smartech App Inbox for React Native

Install CEE React Native plugin using the npm package manager. And then link your native dependencies :

npm install smartech-appinbox-react-native

Step 3: Initialize the SDK

Grab a reference to the CEE React Native library in your JavaScript file.

const SmartechAppInboxReact = require('smartech-appinbox-react-native');

Step 4: App Inbox UI Integration

CEE App Inbox SDK offers two options to create and manage the UI for app inbox screen for the app.

  • Custom UI that can you can create with SDK methods given below.

Custom App Inbox UI Implementation

You can also create a custom Inbox UI using our SDK method to fetch data and display it inside your app.

Get Inbox Messages

To fetch data of app inbox messages from our Server, you can use the method below:
It has 3 values (optional)

  • messageLimit - Count of records of notification. E.g. 10
  • categoryList - Fetching data based on the app inbox categories provided by the user.
  • messageType: It's an integer that has 3 values (1)all, (2)latest, and (3)earliest. 
SmartechAppInboxReact.getAppInboxMessagesByApiCall(messageLimit,messageType,categoryList,(error, appInboxMessages) => {
       
 });

Fetching data from DB

You can use the below method to fetch the data from the database and it can be also used to show data in an offline state.

//ALL_MESSAGE = 0, DISMISS_MESSAGE = 1, READ_MESSAGE = 2, UNREAD_MESSAGE =3

SmartechAppInboxReact.getAppInboxMessages(messageType , (error, appInboxMessages) => {
    let appInboxData =appInboxMessages
});

Category based data

Every AppInbox Message belongs to a specific category and we can use this data to create a dropdown on the menu to display the list of available categories to users.

The below method can be used to get a list of available categories.

SmartechAppInboxReact.getAppInboxCategoryList((error, categoryList) => {
    let categoryListData =categoryList
});

The below method can be used to filter the AppInbox messages list based on the category selected by the user. It takes an ArrayList of strings as a parameter.

  • categoryList - Fetching data based on the app inbox categories provided by the user. (optional) 
SmartechAppInboxReact.getAppInboxMessagesWithCategory(categoryList , (error, appInboxMessages) => {
    let appInboxData =appInboxMessages
});

AppInbox Message Count

To show the count of all, read and unread messages, we can call the below method to get their respective count.
This method accepts smtAppInboxMessageType as a parameter.

smtAppInboxMessageType is an integer . It has 4 values.
ALL_MESSAGE - Get count of both read and unread messages from DB. (default value)
DISMISS_MESSAGE- Get count of only dismissed messages from DB.
READ_MESSAGE - Get count of only read messages from DB.
UNREAD_MESSAGE - Get count of only unread messages from DB.

//ALL_MESSAGE = 0, DISMISS_MESSAGE = 1, READ_MESSAGE = 2, UNREAD_MESSAGE =3

SmartechAppInboxReact.getAppInboxMessageCount( 0, (error, count) => {
  console.log('getAppInboxMessageCount = ', count);
});

Capturing App Inbox user events

You also need to send Viewed, Clicked and Dismissed events to SDK for every action performed on the AppInbox message by the user.

Viewed
Send this event once the AppInbox message is visible to the user and It should be sent only one time for each AppInbox message. This method accepts the payload of the AppInbox message as a parameter.

let itemObj =itemDetail.item
 SmartechAppInboxReact.markMessageAsViewed(JSON.stringify(itemObj))

Clicked
Onclick of AppInbox message, you need to send this event to SDK. This method takes 2 parameters that are deeplink and trid of AppInbox message.

SmartechAppInboxReact.markMessageAsClicked(trid, deeplink) //deeplink and trid of the Appinboxmessage

Dismissed
You can use this method to mimic the feature of swipe to delete the messages from your Recyclerview. You need to manually remove the message from the recycler view and next time when you will fetch the data from the DB, this message will be not present. This method accepts payload of the AppInbox messages.

let itemObj =item
SmartechAppInboxReact.markMessageAsDismissed( itemObj, (error, status) => {
   if (status){
   }
}); //payload of the Appinboxmessage

CopyMessageAsClicked
Onclick of AppInbox Copy action button, you need to send this event to SDK. This method takes 2 parameters that are actionButton payload and trid of AppInbox messages.

let itemObj =item
 SmartechAppInboxReact.copyMessageAsClicked(itemObj,trid)

Retrieving Appinbox Clicked Deeplink Data
Please refer to the steps in the following link : link

Reference of demo project on GitHub

https://github.com/NetcoreSolutions/Smartech-ReactNative-Modular

Updated 4 months ago