# How can we help?

## Search

Before integrating, review the [Mobile Message Center overview](https://support.cordial.com/hc/en-us/articles/38290838975629-Mobile-Message-Center) 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.

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)**

```swift
CordialApiConfiguration.shared.inboxMessageCenterEnabled = true
```

**iOS (Objective-C)**

```objective-c
[CordialApiConfiguration shared].inboxMessageCenterEnabled = YES;
```

**React Native (iOS)**

```objective-c
[CordialApiConfiguration shared].inboxMessageCenterEnabled = YES;
```

**React Native (Android)**

```java
CordialApiConfiguration.getInstance().inboxMessageCenterEnabled = true
```

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

```json
"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.

**Swift**

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

**Objective-C**

```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:

```java
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:

```javascript
CordialSDK.inbox.displayInboxFeed();
```

## Customize the Look & Feel

The following Message Center screen configuration are allowed:

- Screen title
- Each texts:  
  - color
  - alignment
  - font
- Background color
- Cards background color

### iOS (Swift)

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

```swift
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)

```objective-c
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.

```java
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:

```javascript
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)**

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

**iOS (Objective-C)**

```objective-c
@implementation RTNInboxMessageAvailabilityHandler

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

**Android**

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

**React Native / Expo**

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