Before integrating, review the Mobile Message Center overview for feature details and setup context.

To add Mobile Message Center to your app, you have to enable it on the SDK, decide when to display it – for example, on a menu item tap, a bell icon – and ask the SDK to display it.

Optionally you can configure its look such as fonts, text alignments, and colors, and ask to be notified when the number of unread messages in the Message Center changes.

Below are the details on how to achieve all points above. 

Mobile Message Center is available since iOS SDK 5.2.0, Android SDK 4.20.0, React Native SDK 2.2.0, and Expo module 1.2.0

Enable the Message Center

In your Cordial SDK initialization code, enable Mobile Message Center by enabling inboxMessageCenterEnabled.

iOS (Swift)

CordialApiConfiguration.shared.inboxMessageCenterEnabled = true

iOS (Objective-C)

[CordialApiConfiguration shared].inboxMessageCenterEnabled = YES;

React Native (iOS)

[CordialApiConfiguration shared].inboxMessageCenterEnabled = YES;

React Native (Android)

CordialApiConfiguration.getInstance().inboxMessageCenterEnabled = true

Expo (app.json or app.config.js)

"plugins": [
  [
    "@cordialinc/expo-module",
    {
      "inboxMessageCenterEnabled": true
    }
  ]
]

Show the Message Center

iOS

For iOS, there are two ways to display the Message Center screen: push or present:

• Use push when your view is embedded in a UINavigationController. This adds the Message Center to the navigation stack and enables the native back gesture or back button.
• Use present when you want to show the Message Center modally, either full-screen or as a sheet. This is useful when you're not using a navigation stack or want a temporary overlay.

Both options work with InboxFeedViewController, choose the one that best fits your app’s flow.

Swift

let inboxFeedViewController = InboxFeedViewController()
self.navigationController?.present(inboxFeedViewController, animated: true)
// OR
self.navigationController?.pushViewController(inboxFeedViewController, animated: true)

Objective-C

InboxFeedViewController *inboxFeedViewController = [[InboxFeedViewController alloc] init];
[self.navigationController presentViewController:inboxFeedViewController animated:YES completion:nil];
// OR
[self.navigationController pushViewController:inboxFeedViewController animated:YES];

Android

In Android, the Mobile Message Center is displayed by opening InboxFeedActivity activity. You can use method displayInboxFeed()of  CordialInboxMessageApi that will display InboxFeedActivity on top of your app :

CordialInboxMessageApi().displayInboxFeed()

React Native / Expo

In React Native and Expo apps, the Message Center screen is displayed from the native side of the code. On both platforms, the Message Center will be displayed modally. To show the message center: 

CordialSDK.inbox.displayInboxFeed();

Customize the Look & Feel

The following Message Center screen configuration are allowed:

• Screen title
• Each texts:
  • color
  • alignement
  • font
• Background color
• Cards background color

Below are the details on how to configure those settings on each platform.

iOS (Swift)

In Swift, you can specify only those params that you need to have changed from defaults, for example:

let screenTitle = "Message Center"
let titleLabel = InboxFeedLabelSettings(textColor: .blue, textAlignment: .left, font: .systemFont(ofSize: 18, weight: .semibold))
let descriptionLabel = InboxFeedLabelSettings(font: .systemFont(ofSize: 15, weight: .regular))
let inboxFeedOptions = InboxFeedOptions(
  screenTitle: screenTitle,
  titleLabel: titleLabel,
  descriptionLabel: descriptionLabel,
  cellBackgroundColor: .systemBackground
)
let inboxFeedViewController = InboxFeedViewController(options: inboxFeedOptions)

iOS (Objective-C)

In Objective-C, you must pass either all settings or none. Here is an example of all:

NSString *screenTitle = @"Message Center";

InboxFeedLabelSettings *titleLabel = [[InboxFeedLabelSettings alloc] initWithTextColor:[UIColor labelColor] textAlignment:NSTextAlignmentLeft font:[UIFont systemFontOfSize:18 weight:UIFontWeightSemibold]];
InboxFeedLabelSettings *descriptionLabel = [[InboxFeedLabelSettings alloc] initWithTextColor:[UIColor labelColor] textAlignment:NSTextAlignmentLeft font:[UIFont systemFontOfSize:15 weight:UIFontWeightRegular]];
InboxFeedLabelSettings *ctaLabel = [[InboxFeedLabelSettings alloc] initWithTextColor:[UIColor systemOrangeColor] textAlignment:NSTextAlignmentLeft font:[UIFont systemFontOfSize:15 weight:UIFontWeightMedium]];

InboxFeedOptions *inboxFeedOptions = [[InboxFeedOptions alloc] initWithScreenTitle:screenTitle titleLabel:titleLabel descriptionLabel:descriptionLabel ctaLabel:ctaLabel cellBackgroundColor:[UIColor systemBackgroundColor] backgroundColor:[UIColor systemBackgroundColor]];

InboxFeedViewController *inboxFeedViewController = [[InboxFeedViewController alloc] initWithOptions:inboxFeedOptions];

Android

To customize Message Center, pass InboxFeedOptions to displayInboxFeed()of  CordialInboxMessageApi. All params are optional to customize, which means you can specify only those params that you need to have changed from defaults.

val inboxFeedOptions = InboxFeedOptions(
            title = "Inbox Feed",
            backgroundColor = "#FFFFFF".toColorInt(),
            itemOptions = InboxFeedItemOptions(
                title = TextSettings(
                    fontFamily = "sans-serif-black",
                    fontWeight = 900,
                    textAlign = TextAlignment.LEFT,
                    size = 17.sp,
                    color = 0xFF000000.toInt()
                ),
                description = TextSettings(
                    fontFamily = "cursive",
                    fontWeight = 900,
                    textAlign = TextAlignment.JUSTIFY,
                    size = 15.sp,
                    color = ContextCompat.getColor(this, R.color.colorPrimary)
                ),
                cta = TextSettings(
                    fontFamily = "monospace",
                    fontWeight = 900,
                    textAlign = TextAlignment.LEFT,
                    size = 15.sp,
                    color = "#FF4B33".toColorInt()
                ),
                backgroundColor = "#FFFFFF".toColorInt()
            )
        )
CordialInboxMessageApi().displayInboxFeed(inboxFeedOptions)

React Native / Expo

While passing all params is possible, pass only those that you need to change from defaults:

const options = {
  screenTitle: "Inbox Feed",
  backgroundColor: 'darkgray',
   cellTitleStyle: {
    fontSize: 18,
    fontFamily: fontFamily,
    fontWeight: "bold",
    color: 'black',
    textAlign: 'left'
  },
   cellDescriptionStyle: {
    color: 'black'
  }
};

CordialSDK.inbox.displayInboxFeed(options);

Listen to Unread Message Count

This is the place where you would update app icon badge or in-app indication that there is a new inbox messages available:

For Swift or Objective-C, implement the InboxMessageAvailabilityDelegate and set it to CordialApiConfiguration.shared.inboxMessageAvailabilityDelegate

iOS (Swift)

class InboxMessageAvailabilityHandler: InboxMessageAvailabilityDelegate {
  func onUnreadCountChanged(count: Int) {
    // Handle unread count
  }
}

iOS (Objective-C)

@implementation RTNInboxMessageAvailabilityHandler

- (void)onUnreadCountChangedWithCount:(NSInteger)count {
    // Handle unread count
}

Android

CordialApiConfiguration.getInstance().inboxMessageAvailabilityListener =
            object : InboxMessageAvailabilityListener {
                override fun onUnreadCountChanged(count: Int) {
                    super.onUnreadCountChanged(count)
                   // Handle unread count
                }
            }

React Native / Expo

CordialSDK.inbox.setOnUnreadCountChangedListener((count) => {
  // Handle unread count
});