Inbox content

Overview

Inbox notifications are messages that get pulled by the app when the app is opened. A full-page message is displayed in the app, and it can also include an inbox display, which can be customized based on a template. An inbox message is similar to an email. Messages are stored in cloud storage, and the SDK syncs this message to local storage, which is similar to an email sync. Tapping an item in the inbox opens the corresponding full inbox message.

Inbox templates

An inbox template determines the fields that are displayed during the creation of an inbox message. You can create multiple inbox templates in the Campaign user interface. The message creator can then choose which template to use. For more information see Set up the inbox template

The following default templates are available in the UI:

  • Traditional — Used to create an HTML inbox message that can be accessed by the user in the mobile app inbox.
  • Video — Used to create an inbox message containing a video that can be accessed by the user in the mobile app inbox.
  • Image — Used to create an inbox message containing a video that can be accessed by the user in the mobile app inbox.

Inbox notification plugins

There are three templates you can choose from to customize your inbox notifications.

  • Default template — A simple HTML message with a subject, date display, preview text, and message.
  • Post template — A post-style message with the following features: optional title image, title, message, optional video or image, and optional extra text to follow the video or image.
  • Action template — An incoming mobile app message that includes the openInboxMessage action, which opens up the specified message.

Acoustic Campaign provides plugins for these templates that you can implement. The Inbox Messaging Content Plugin provides the user with an email-esque paradigm. Inbox messages are sent to the users from Acoustic's web service and are synced down to the device. The messages can be personalized and are rendered on the device in a list of messages as well as in a full-screen presentation. The display of the message content is customized by templates.

The following payload example shows you the default inbox notification template.

{ 
     "template": "default", 
     "content": 
     {
     "messagePreview": 
     { 
     "subject": "Subject here", 
     "previewContent": "Preview content here" 
     }, 
     "messageDetails": 
     { 
     "richContent": "<b>html message here</b><br><br><a href='actionid:offer-link-1'>Click here!</a>", 
     "actions": { "offer-link-1" : {"type": "url", "value": "http://acoustic.com/offer" } } 
     } 
     }
    }

The following payload example shows you an inbox notification template that supports images and videos.

{ 
     "template": "post", 
     "content": 
     {
     "contentVideo":"video stream url here",
     "contentImage":"content image url here",
     "header":"Header here",
     "subHeader":"sub header here",
     "headerImage":"header image url here",
     "contentText":"content text",
     "actions":[{"name":"acoustic.co", "type":"url", "value":"http://acoustic.co"}, {"name":"dial", "type":"dial", "value":"18884266840"}, {"name":"yahoo", "type":"url", "value":"http://yahoo.com"}]
     }
    }

Limits on inbox messages

Server limits on inbox sync API calls

The server limits the frequency of inbox sync API calls. This limit can vary per customer, but is typically once every two minutes. For the exact value for your organization, contact Support.

SDK limits on inbox sync API calls

  • The inbox sync rules are enforced by the server. Additional limits are enforced on inbox sync API calls by the SDK. If you use the inbox sync API to sync inbox messages, the minimum interval between calls is 5 minutes for regular sync. For example, if you use the SDK API to sync inbox messages every time the mobile user opens the inbox, the SDK allows only one call to the server every 5 minutes, regardless of the number of times the API is called.
  • If you call the inbox sync too often, the SDK returns the following error:
    userInfo : { 'error': 'empty'}
  • There are no limits for notifications with an openInboxMessage action that contains a message that is not in the SDK database.

Install the template plugins

The three templates you can implement are:

  • MCEInboxDefaultTemplate
  • MCEInboxpostTemplate
  • MCEInboxActionPlugin

To implement inbox notifications, the template classes should be NSObject subclasses that implement the MCETemplate protocol. They register with MCETemplateRegistry in the application:didfinishlaunchingwithoptions: method of the AppDelegate as plug-ins that register with MCEActionRegistry in the same place. The template class is responsible for providing UITableViewCell subclass objects that implement the MCETemplatePreview protocol to display message previews. The template class also must supply UIViewController subclass objects that implement the MCETemplateDisplay protocol to display the full-page content of the messages. The task of listing the messages and navigating to the full-page view of them is handled by the MCEInboxTableViewController.

  1. Drag all the files in the inbox plugin folder into the project, and initialize them in the AppDelegate.
    
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [MCEInboxActionPlugin registerPlugin]; [MCEInboxPostTemplate registerTemplate]; [MCEInboxDefaultTemplate registerTemplate];
  2. Set one of the view controller classes to MCEInboxTableViewController. The rest of the interactions are automatically handled by that class. You can customize the templates or create new templates based on the protocol and class requirements.

To get started you need Android 4.4 and higher (API level 19). Starting in Release 3.6.5.0 of the Mobile App Messaging Android SDK, plug-in files are delivered in aar as well as zip file formats.

Implement plugin using zip files

  1. Extract the contents of the acoustic-mobile-push-android-sdk-plugin-inbox-<version number >.zip file from the plugins folder.
  2. Copy inbox.json, located under assets/mce/plugins, to your project assets directory.
  3. Copy the resources that are located under res/layout (all layout folders), res/menu, and res/drawable (all the drawable folders) to your project.
  4. Add the add_message, delete_message, set_message_unread, next_message, and prev_message strings from the res/values/strings.xml file to the strings.xml file in your project.
  5. Add acoustic-mobile-push-android-sdk-plugin-inbox-<version number>.jar file in the plugins folder to your project as an Android library.
  6. Add the inbox activities to AndroidManifest.xml file.
    
    
    <activity android:name="co.acoustic.mobile.push.sdk.plugin.inbox.RichInboxActivity" android:configChanges="orientation" > </activity> <activity android:name="co.acoustic.mobile.push.sdk.plugin.inbox.InboxMessageDisplayActivity" android:configChanges="orientation" > </activity>
  7. 
    
    <service android:name="co.acoustic.mobile.push.sdk.plugin.inbox.InboxUpdateService" />

Implement using aar plugin files

  1. Add the aar files to your project and to the build.gradle file.
  2. Add the inbox activities to AndroidManifest.xml file.
    
    
    <activity android:name="co.acoustic.mobile.push.sdk.plugin.inbox.RichInboxActivity" android:configChanges="orientation" > </activity> <activity android:name="co.acoustic.mobile.push.sdk.plugin.inbox.InboxMessageDisplayActivity" android:configChanges="orientation" > </activity>
  3. Add the inbox service to Androidmanifest.xml file.
    
    
    <service android:name="co.acoustic.mobile.push.sdk.plugin.inbox.InboxUpdateService" />
  1. Install the plugin.
    
    
    npm install /plugins/react-native-acoustic-mobile-push-inbox
  2. Link the plugin.
    
    
    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.
    
    
    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:
    
    
    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.
    
    
    <link rel="stylesheet" type="text/css" href="css/inbox.css" />
  3. Add the template stylesheet to the page.

    Inbox default stylesheet

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

    Inbox post stylesheet

    
    
    <link rel="stylesheet" type="text/css" href="css/inbox_post.css" />
  4. Add inbox list
    
    
    <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.
    
    
    <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>

Add the plugin files to the forms project.

  1. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxMessagePage.xaml to the Forms project in Xamarin.
  2. Right-click on InboxMessagePage.xaml and then click Properties.
  3. Set Build Action to EmbeddedResource.
  4. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
  5. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxMessagePage.xaml.cs to the Forms project.
  6. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxPage.xaml to the Forms project.
  7. Right-click on InboxPage.xaml and then click Properties.
  8. Set Build Action to EmbeddedResource.
  9. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
  10. Add {package}/plugins/Inbox Plugins/Inbox Pages/InboxPage.xaml.cs to the Forms project.

Customize pages for your application

Add next.png by following these steps.

  1. Add {package}/plugins/Inbox Plugins/Inbox Pages/next.png to Android project's Resources/drawable directory.
  2. Create next.imageset in iOS project's Resources/Images.xcassets folder.
  3. Add {package}/plugins/Inbox Plugins/Inbox Pages/[email protected] to next.imageset for Universal 1x image.
  4. Add {package}/plugins/Inbox Plugins/Inbox Pages/[email protected] to next.imageset for Universal 2x image.
  5. Add {package}/plugins/Inbox Plugins/Inbox Pages/[email protected] to next.imageset for Universal 3x image.

You can add the prev.png, refresh.png, trash.png by following the same steps.

Configure your app to include inbox notification base templates

  1. Add {package}/plugins/Inbox Plugins/InboxDataTemplate.xaml to the Forms project in Xamarin.
  2. Right-click on InboxDataTemplate.xaml and then click Properties.
  3. Set Build Action to EmbeddedResource.
  4. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
  5. Add {package}/plugins/Inbox Plugins/InboxDataTemplate.xaml.cs to the Forms project.
  6. Add {package}/plugins/Inbox Plugins/InboxTemplateCell.cs to the Forms project.

Configure your app to include inbox notification default templates

  1. Add {package}/plugins/Inbox Plugins/Default Inbox template/DefaultInboxTemplate.cs to the Forms project in Xamarin.
  2. Add {package}/plugins/Inbox Plugins/Default Inbox template/DefaultInboxTemplateCell.xaml to the Forms project in Xamarin.
  3. Right-click on DefaultInboxTemplateCell.xaml and then click Properties.
  4. Set Build Action to EmbeddedResource.
  5. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
  6. Add {package}/plugins/Inbox Plugins/Default Inbox Template/DefaultInboxTemplateCell.xaml.cs to the Forms project.
  7. Add {package}/plugins/Inbox Plugins/Default Inbox Template/DefaultInboxTemplatePage.xaml.cs to the Forms project.
  8. Add {package}/plugins/Inbox Plugins/Default Inbox Template/DefaultInboxTemplateView.xaml.cs to the Forms project.
  9. Right-click on DefaultInboxTemplateView.xaml and then click Properties.
  10. Set Build Action to EmbeddedResource.
  11. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
  12. Add SDK.Instance.RegisterInboxTemplate ("default", new DefaultInboxTemplate ()); to the project's App Constructor.
  13. Customize the template for your application.

Configure your app to include inbox notification post-style templates

  1. Add {package}/plugins/Inbox Plugins/Post Inbox Template/PostInboxTemplate.cs to the Forms project in Xamarin.
  2. Add {package}/plugins/Inbox Plugins/Post Inbox template/PostInboxTemplateView.xaml to the Forms project in Xamarin.
  3. Right-click on DefaultInboxTemplateView.xaml and then click Properties.
  4. Set Build Action to EmbeddedResource.
  5. Set Custom Tool to MSBuild:UpdateDesignTimeXaml.
  6. Add {package}/plugins/Inbox Plugins/Post Inbox Template/PostInboxTemplateView.xaml.cs to the Forms project.
  7. Add SDK.Instance.RegisterInboxTemplate ("post", new PostInboxTemplate ()); to the project's App Constructor.
  8. Customize the template for your application.

Add node property if sending video in inbox messages

If you plan on sending video in inbox messages, you will also need to add the <application> node property android:usesCleartextTraffic with the value of "true" in your AndroidManifest.xml file of your Android subproject. For example:


<application android:label="Sample" android:name="co.acoustic.mobile.push.sdk.api.MceApplication" android:usesCleartextTraffic="true">

To sync inbox messages:

  1. Create an inbox variable.
var inbox = InboxMessageValue();
  1. 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

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
  1. 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; }); }); }
  1. 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

Customize inbox notifications

Manage expired messages

Restrict expired messages

To restrict expired messages from displaying in the inbox, use the following code:


MCEInboxDefaultTemplate.m class -(BOOL)shouldDisplayInboxMessage: (MCEInboxMessage*)inboxMessage { /* This would not allow the inbox to open messages that are expired */ //if([inboxMessage isExpired]) // return FALSE; return TRUE; }

Remove expired messages

To remove expired messages from the inbox, add the following code to MCEInboxTableViewController.m: Objective-C


static const BOOL DISPLAY_EXPIRED_MESSAGES = FALSE; in method -(void)smartUpdateMessages:(NSMutableArray*)inboxMessages add: // create a single unified list of all the messages NSMutableArray * allMessages; if(DISPLAY_EXPIRED_MESSAGES) { allMessages = [inboxMessages mutableCopy]; } else { allMessages = [NSMutableArray array]; for (MCEInboxMessage * message in inboxMessages) { if([message isExpired]) { [message delete]; } else { [allMessages addObject:message]; } } inboxMessages = [allMessages mutableCopy]; }

Delete expired messages

When the server cleans up the messages it marks them as deleted, and only removes them from its storage after that deleted flag is synced to the device. When the device is syncing with the server, it will pick up these deleted flags and remove the messages from its local store even without calling the clearExpiredMessages method.

Users will see expired messages for 30 days after the expiration date, and then these messages are automatically purged by the server. This is useful for showing users what they missed (perhaps by dimming the message or marking it as "expired"). Under other circumstances, you may want to delete all expired messages and prevent them from being presented to users.

To delete all expired messages, add the following in the app startup code:


MCEInboxDatabase.sharedInstance().clearExpiredMessages()

[MCEInboxDatabase. sharedInstance clearExpiredMessages]

Hide expired messages

To hide expired messages from a user, uncomment the code in MCEInboxDefaultTemplate.m shouldDisplayInboxMessage:


if([inboxMessage isExpired]) { return FALSE; }

if ([inboxMessage isExpired]) { return FALSE; }

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.

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. Xamarin does not have a clear expired messages method exposed to C# developers, however if you do not wish to show expired messages, modify the code in InboxPage.xaml.cs in the SyncMessages method.

📘

Note:

Hiding expired messages functionality is planned for a future release.

Customize the look and feel of the inbox notifications UI

The inbox we ship is configurable so that you can have it appear the way you want it. Suppose your other UI uses the Times Roman font with a white foreground color and a red background color. You may want your inbox messages to show up in the list with similar styling.

  • In the Default template edit the .xib files in the Default Template Handler directory to match the desired style using the Interface Builder GUI.
  • In the Post template edit the .xib files in the Post Template directory to match the desired style using the Interface Builder GUI.

Change the "container" for inbox messages

The MCEInboxTableViewController can be adjusted to look how you wish. Both the container and the inbox templates are adjusted using a combination of adjusting the xib/storyboard as well as adjusting the code.

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.

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.

  • Default Template: Edit the .xaml files in the Default Inbox Template directory to match the desired style using the Xamarin Forms / standard Microsoft XAML language.
  • Post Template: Edit the .xaml files in the Post Inbox Template directory to match the desired style using the Xamarin Forms / standard Microsoft XAML language.

Show background image

To use an image as your background instead of a color:

  • In the Default Template Handler directory, edit the .xib files to match the desired style using the Interface Builder GUI.
  • In the Post template directory edit the .xib files to match the desired style using the Interface Builder GUI.

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.
  • Default Template: Edit the .xaml files in the Default Inbox Template directory to match the desired style using the Xamarin Forms / standard Microsoft XAML language.
  • Post Template: Edit the .xaml files in the Post Inbox Template directory to match the desired style using the Xamarin Forms / standard Microsoft XAML language.

Sort inbox messages

Change the inbox sort order

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.

  • For Swift: The simplest way to change the sort order would be to use the standard Swift Array sort method.
  • For Objective-C: The simplest way to change the sort order is to use the standard NSArray sorting methodologies.

Using a descriptor


messages.sort(by: { (lhs, rhs) -> Bool in guard let lhsCustomValue = lhs.content["customKey"] as? Int, let rhsCustomValue = rhs.content["customKey"] as? Int else { return false } return lhsCustomValue > rhsCustomValue })

[allMessages sortUsingDescriptors:@[ [NSSortDescriptor sortDescriptorWithKey: @"customObject.customField" ascending: self.ascending]]];

Using a custom function


NSInteger intSort (MCEInboxMessage * message1, MCEInboxMessage * message2, void *context) { int v1 = message1. content [ @ "customObject" ][ @ "customField" ] int v2 = message2. content [ @ "customObject" ][ @ "customField" ] if (v1 < v2) return NSOrderedAscending; else if (v1 > v2) return NSOrderedDescending; else return NSOrderedSame; } NSArray * sortedMessages = [allMessages sortedArrayUsingFunction: intSort context:NULL];

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; });

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 is to use the OrderBy method of the standard Microsoft LINQ library. However, this does not sort in place.


Messages = new ObservableCollection<InboxMessage>( Messages.OrderBy(i => i.Content["customField"]) );

Customize behavior

You can set different behaviors based on the kinds of inbox messages received (e.g., play a sound when special offers are opened but not regular messages).

To designate particular sounds for specific messages, for example, add a custom field to the inbox message itself. The best place to act on that custom field would be in the presentation layer for the specific template that will be used. If one were using a default template and wanting to play a sound when the message was opened, a custom field could be added called "sound". Then, leave it blank or do not include it if no sound is to be played and specify a filename when a sound should be played:


MCEInboxDefaultTemplateDisplay.swift override func viewWillAppear() { super.viewWillAppear() if let inboxMessage = inboxMessage, let name = inboxMessage.content["sound"] as? String { NSSound(named: NSSound.name( name ) )?.play() } }

MCEInboxDefaultTemplateDisplay. m : -( void ) viewWillAppear: (BOOL)animated { [ super viewWillAppear:animated]; if (self. inboxMessage && self. inboxMessage . content [ "sound" ]) { NSString * name = self. inboxMessage . content [ "sound" ]; [[NSSound soundNamed: name] play]; } }

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(); }

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.

There is not a Xamarin Forms prebuilt way to play a sound, so to accomplish this, you will either have to find a plugin, or write a cross platform dependency service. The concept will be the same.

InboxMessagePage.xaml.cs


public InboxMessagePage (InboxMessage message, InboxPage inbox) { if(message.Content["sound"] != null) { MediaPlayer(message.Content["sound"].toString() ); } }

Add custom field

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.

In the UI, the inbox message context is a json object, so it can contain any custom data.


if(inboxMessage.getContent().optString("foo") != null) { // do something with foo here }

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']

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 JObject of the InboxMessage object. All fields, subject, body, preview etc., are "custom" fields. For instance, the subject is contained within an embedded JObject within the InboxMessage's content JObject:


message.Content["messagePreview"]["subject"].toString();

And the html content itself is within a separate embedded JObject within the Content JObject:


message.Content["messageDetails"]["richContent"].toString();

But the developer could put the custom data anywhere they like, even in the root of the Content JObject:


message.Content["foo"].toString();

Support larger screens (iOS only)

On the iPhone 6 Plus and larger screens, you might not want to have a full-page display of the message, which MCEInboxTableViewController navigates. You may want to have the selection of a message open in a different view controller and not navigate from the message list. This can be accomplished by sending an NSNotification message with the name setContentViewController and UIViewController subclass you want to display full-page messages in as the object. This overrides the navigation in MCEInboxTableViewController and adds the content to the specified UIViewController subclass object.

Specify inbox messages (Android only)

You can specify which inbox messages that you want to display by implementing the InboxPlugin.InboxControl interface. By default, all messages are displayed.
Register the interface. For example,

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

Merge the WCA SDK inbox with another inbox

Often you have an existing inbox and want to merge inbox messages that are sent through the Campaign SDK with your existing inbox.

In this case, it's assumed that you have two separate sources of messages that should be displayed. One of them is the inbox messages sent by Campaign, which are stored in a local database on the device. The other is some other messaging source of your choosing which may be another local database or data retrieved by API calls.

It is recommended that you do not try to merge databases, but instead, show the merged data at the time of presentation. In other words, if you want to merge inbox messages with another message source, keep both sources separate and construct a list in memory (sorted by date) from which you can choose.


Did this page help you?