Inbox content

To get started, you need Android 5.0 (API level 21) or later. Two implementation options are available.

Option A: Automatic (recommended)

If you are using Campaign SDK for Android 3.9.18 or later, you can implement the Inbox plug-in using Maven Central. Open the app-level build.gradle file and add the Inbox plug-in to the Dependencies section.

implementation "io.github.go-acoustic:acoustic-mobile-push-android-inbox:+"

Still using an older version? See Migrate Campaign SDK for Android to version 3.9.18.

Option B: Manual

A manual option is available for all versions of the Inbox plug-in.

1. Go to our plugins directory on Github.
2. Add acoustic-mobile-push-android-sdk-plugin-inbox.aar to your project and to the build.gradle file.

1. Install the plugin.
   URL

   
   npm install /plugins/react-native-acoustic-mobile-push-inbox
   

2. Link the plugin.
   URL

   
   react-native link react-native-acoustic-mobile-push-inbox
   

3. Copy files in '<sdk folder>/plugins/react-native-acoustic-mobile-push-inbox/javascript' into your project.
   JavaScript

   
   import {DefaultInbox} from './inbox/default-inbox-template';
   import {PostInbox} from './inbox/post-inbox-template';
   import {InboxAction} from './inbox/inbox-action';
   

Create a page to show the list of messages in your application

1. List the inbox messages with [RNAcousticMobilePush.listInboxMessages](doc:react-native-acoustic-mobile-push-inbox.html#user-content-listinboxmessagesascending-callback.
2. Use the <InboxListItem inboxMessage={ ... } /> component to display the list item view of the template for the message.

Create a page to show an individual message in your application

Use the <InboxMessageView inboxMessage={ ... } /> component to display the full message view of the template for the message.

📘

Tip:

See inbox-screen.js in the sample application for a complete example.

You must have, at a minimum, version 4.2.0 of Apache Cordova to include videos in your inbox notifications.

1. Run the following code in the command line to copy the JavaScript and CSS to the project and allow the JavaScript to be auto included in the project:
   JavaScript

   
   cordova plugin add <path to download directory>/plugins/co.acoustic.mobile.push.plugin.inbox
   cordova prepare
   

2. Add the global inbox stylesheet to the page.
   JavaScript

   
   <link rel="stylesheet" type="text/css" href="css/inbox.css" />
   

3. Add the template stylesheet to the page.

   Inbox default stylesheet

   JavaScript

   
   <link rel="stylesheet" type="text/css" href="css/inbox_default.css" />
   

   Inbox post stylesheet

   JavaScript

   
   <link rel="stylesheet" type="text/css" href="css/inbox_post.css" />
   

4. Add inbox list
   JavaScript

   
    <div id='inboxMessages' class="ui-body"></div>
    <div data-role="header">
    <a href="#sample" data-direction="reverse" data-transition="slide">Sample</a>
    <h1>Inbox</h1>
    <a id="refresh_button"><img width='22' height='22' src="images/inbox/refresh.png"></a>
    </div>
    </div>
    

5. Add the inbox message to the page.
   JavaScript

   
   <div data-role="page" id="inboxMessage">
    <div id='inboxMessageContent' class="ui-body"></div>
    <div data-role="header">
    <div id='buttons'>
    <a id="delete_button"><img width='22' height='22' src="images/inbox/trash.png"></a>
    <a id="down_button"><img width='22' height='11' src="images/inbox/chevron-down.png"></a>
    <a id="up_button"><img width='22' height='11' src="images/inbox/chevron-up.png"></a>
    </div>
    <a href="#inbox" data-direction="reverse" data-transition="slide">Inbox</a>
    <h1></h1>
    </div>
    </div>
    

To sync inbox messages:

1. Create an inbox variable.

var inbox = InboxMessageValue();

2. Then use the syncInBoxMessages() function.

inbox.syncInBoxMessages();

For a more comprehensive overview of the sync method, see the following example:

Future<void> syncInBoxMessages() async {
   getInboxListMessage();
   final String? response =
       await const MethodChannel('flutter_acoustic_mobile_push_inbox')
           .invokeMethod('syncInboxMessage');
   if (response == null || response.isEmpty) {
     syncInBoxMessage.broadcast(BoolEventArgs(false));
   } else {
     if (response == "Success") {
       syncInBoxMessage.broadcast(BoolEventArgs(true));
     } else {
       syncInBoxMessage.broadcast(BoolEventArgs(false));
     }
   }
 }

For more information, see

• flutter_acoustic_mobile_push_inbox.dart

Implement inbox UI in your app

You can implement the inbox plugin our SDK provides in your flutter app. You can also customize the UI to appear the way you want it.

1. Install the flutter_acoustic_mobile_push_inbox plugin through your project's pubspec.yaml file.

flutter_acoustic_mobile_push_inbox:
   path: ../../plugins/flutter_acoustic_mobile_push_inbox

2. Add the necessary imports to the main.dart file.

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_acoustic_mobile_push_inbox/flutter_acoustic_mobile_push_inbox.dart';

Access a pre-built inbox template with all features

Create a route to access the pre-built inbox template in your main.dart file.

@override
 Widget build(BuildContext context) {
   return GetMaterialApp(
     debugShowCheckedModeBanner: false,
     home: HomeScreen(),
     routes: {
         '/inbox': (context) => Inbox(),
     },
   );
 }

Access inbox data for custom inbox implementation

Sometimes, you may want more control over how you present the inbox messages. The following steps illustrate the functions you can use to customize your inbox implementation.

1. Add the readJsonMessagesSdk() function to pull the message data from the SDK and then add a location to store that data. In the sample app, the data is stored inside _messages.
   a. Create local variable:

var inbox = InboxMessageValue();

b. Sync message from SDK:

inbox.syncInBoxMessages();

c. Create an empty array to store the messages and a subscription for the data.

/ creates an empty array for messages to be stored in
List _messages = [];

 // fetch sdk data
 Future<void> readJsonMessagesSdk() async {   
     inbox.inBoxList.subscribe((args) {
     var data = args!.inboxMessage;
     for (var i = 0; i < data.length; i++) {
       var box = data[i];
     }
     setState(() {
       _messages = data;
     });
   });
 }

2. Run the SDK function to load the message data from the SDK when the inbox page is opened.

@override
 void initState() {
   // TODO: implement initState
   super.initState();
   inbox.syncInBoxMessages();
   readJsonMessagesSdk()
 }

You can now access the inbox message data. The following example shows how to reference various parts of the data inside each message.

var simpleMessageTitle =
               _messages[index].content.messagePreview.subject;
           var simpleMessageText =
               _messages[index].content.messagePreview.previewContent;
           var simpleMessageContent =
               _messages[index].content.messageDetails.richContent;

var simpleMessageMessageId = Inbox.messages[index].inboxMessageId;
var simpleMessageIsRead = Inbox.messages[index].isRead;
var simpleMessageIsExpired = Inbox.messages[index].isExpired;

This data is mapped from a JSON object and is accessed through the above reference route.

For more information about the individual pieces of data within each message and how to access them, see the classes in flutter_inbox_pay_load.dart.

📘

Tip:

You can find additional data attributes to customize your inbox implementation in the plugins folder. For example,

• Simple Message – plugins/flutter_acoustic_mobile_push_inbox/lib/inbox/messages/simpleMessage/simple_message.dart
• Image Message – plugins/flutter_acoustic_mobile_push_inbox/lib/inbox/messages/imageMessage/image_message.dart
• Video Message – plugins/flutter_acoustic_mobile_push_inbox/lib/inbox/messages/videoMessage/video_message.dart

To control expired messages, go to MainSampleMenuActivity.java in the Android sample app and after else if (position == INBOX_INDEX) { and before InboxMessagesClient.showInbox(getApplicationContext()); add the following code:

List expiredMessages = new LinkedList();
RichContentDatabaseHelper.MessageCursor cursor = RichContentDatabaseHelper.getRichContentDatabaseHelper(getApplicationContext()).getMessages();
Date now = new Date(System.currentTimeMillis());
while (cursor.moveToNext()) {
RichContent rc = cursor.getRichContent();
if(rc.getExpirationDate().before(now)) {
expiredMessages.add(rc);
}
}
for(RichContent expiredMessage : expiredMessages) {
InboxMessagesClient.deleteMessage(getApplicationContext(), expiredMessage);
}
InboxMessagesClient.showInbox(getApplicationContext());

Delete expired messages

By default, the SDK does not remove expired messages. This means you will see expired messages until 30 days after the expire date, then they will automatically be purged by the server. This is useful for showing something that may be missed, perhaps by dimming the message or marking it as "expired". Under other circumstances, though, you may want to delete all expired messages and prevent them from being presented at all. The way to do this:

InboxPlugin.setInboxControl(new InboxPlugin.InboxControl() {
    @Override
    public boolean shouldDisplayInboxMessage(RichContent richContent) {
        // add code here to check if inbox message (richContent) should be displayed;
        return !richContent.getIsExpired(); // answer true if you want the message to appear in the inbox, false if it should not appear
    }
});

Cycle through the expired messages and delete them, then send RichContentDatabaseHelper.getRichContentDatabaseHelper(context).clearDeletedMessages(); before you open the inbox. This deletes the inbox messages that have expired.

Android code is shipped as an AAR in the sample app, but we provide the source as well, in .zip files in the plugins directory. You may wish to import the source rather than referencing the AAR if you intend to make changes to the plugins. You can customize your own AAR and replace ours with it.

The Android SDK API allows you to choose what you want to do:

• Display the expired message (override inbox control and return true for an expired message in shouldDisplayInboxMessage).
• Not display the expired message (default behavior).
• Delete the expired message.

To clear/delete expired messages

RichContentDatabaseHelper helper = RichContentDatabaseHelper.getRichContentDatabaseHelper(context);
RichContentDatabaseHelper.MessageCursor cursor = helper.getMessages();
while (cursor.moveToNext()) {
    RichContent rc = cursor.getRichContent();
    if(rc.getIsExpired()) {
        helper.deleteMessage(rc);
    }
}

This should be called just before showing the inbox. The SDK calls clearDeletedMessages on its own before syncing the inbox with the server.

By default, the SDK does not remove expired messages. This means you will see expired messages until 30 days after the expire date, then they will automatically be purged by the server. This is useful for showing something that may be missed, perhaps by dimming the message or marking it as "expired". Under other circumstances, though, you may want to delete all expired messages and prevent them from being presented at all. Cordova does not have a clear expired messages method exposed to javascript developers, however this method can be added, if desired. If you do not wish to show expired messages, modify the code in MCEInbox.js in the MCEInboxPlugin.setInboxMessagesUpdateCallback method.

📘

Note:

Hiding expired messages functionality is planned for a future release.

The inbox that Acoustic Campaign ships is configurable so that you can have it appear the way you want it. For example, if all your other UI has a font of Times Roman with a foreground color of white and a background color of red, you may want your inbox messages to show up in the list with similar styling.

You can edit all the post layout files under Res/Layout that starts with post_ to match the desired style, then you can rebuild the AAR and replace the Acoustic Campaign AAR with the rebuilt one.

The inbox that Acoustic Campaign ships is configurable so that you can have it display the way you want it. For example, if all of your other UI has a font of Times Roman with a foreground color of white and a background color of red, you may want your inbox messages to show up in the list with similar styling.

• Default Template: Edit the inbox_default.css file to match the desired style using Cascading Style Sheets.
• Post Template: Edit the inbox_post.css file to match the desired style using Cascading Style Sheets.

You can edit all the post layout files under Res/Layout that starts with post_ to match the desired style, then you can rebuild the AAR and replace the Acoustic Campaign AAR with the rebuilt one.

• Default Template: Edit the inbox_default.css file to match the desired style using Cascading Style Sheets.
• Post Template: Edit the inbox_post.css file to match the desired style using Cascading Style Sheets.

You can sort inbox messages by using the following method in the InboxControl API.public boolean isMessagesSortAscending()

Messages are displayed in either ascending or descending order. If the method returns true, inbox messages are returned in ascending order, where the oldest message is displayed first. If the method returns false, the inbox messages are returned in descending order, where the the newest message is displayed first. The default is true.

Update the inbox sample code, as shown:

import co.acoustic.mobile.push.sdk.plugin.inbox.InboxPlugin; 

@Override
    public void onCreate() {
        super.onCreate();
        InboxPlugin.InboxControl inboxControl = new InboxPlugin.InboxControl() { 
            @Override 
            public boolean shouldDisplayInboxMessage(RichContent richContent) { 
                // check the rich content and decide whether to display it in the inbox (return true) or not (return false)
                return true; 
            } 

            @Override 
            public boolean isMessagesSortAscending() { 
                // decide if you want inbox messages sort to be oldest first (return true) or newest first (return false)
                return false; 
            } 
        }; 
        InboxPlugin.setInboxControl(inboxControl); 
        

Change the inbox sort order

Other than by default, you may want to sort the inbox in a different order. For instance, you might want to sort using a custom field rather than by sendDate.

The Android SDK provides the ability to sort by date ascending or descending. Because the inbox display is based directly on the database result, only an option to sort on a database field is given.

For a different sort, you can edit the RichInboxListFragment code and create a list adapter with the sorted messages.

Change the inbox sort order

Other than by default, you may want to sort the inbox in a different order. For instance, you might want to sort using a custom field rather than by sendDate.

The simplest way to change the sort order would be to use the standard array sort function.

allMessages.sort(function (a, b) {
    return a.content.customKey - b.content.customKey;
});

To take different behaviors based on the kinds of inbox messages received (e.g., play a sound when special offers are opened but not regular messages), you can override onCreate of InboxMessageDisplayActivity like this:

protected void onCreate(Bundle savedInstanceState) {
{
super.onCreate(savedInstanceState)
RichContent currentMessage = messages.get(currentIndex);
if(currentMessage.getContent().optString("foo") != null) {
// do something here (play a sound for example)
}
}

To take different behaviors based on the kinds of inbox messages received (e.g., play a sound when special offers are opened but not regular messages), you can override onCreate of InboxMessageDisplayActivity.

MCEInbox.JS:

exports.openInboxMessage = function(inboxMessage) {
if(inboxMessage.content.sound) {
var name = inboxMessage.content.sound;
var audio = new Audio(name);
audio.play();
}

The inbox can have custom fields associated with each message. You can use these fields to include information that is useful to your app but not presented in the inbox itself.

Any custom fields will simply show up in the content key of the InboxMessage object. All fields, subject, body, preview etc., are "custom" fields. For instance, the subject field is contained within an embedded object in the InboxMessage's content dictionary.

inboxMessage['content']['messagePreview']['subject']

The html content itself is within a separate embedded object within the content object.

inboxMessage['content']['messageDetails']["richContent"]

But you can put the custom data anywhere you like, even in the root of the content object.

inboxMessage['content']['foo']