# Setting up Message Inbox for Cordova

The Pushwoosh Cordova plugin ships Message Inbox (the "bell icon" App Inbox) as part of the same `pushwoosh-cordova-plugin` dependency used for push notifications. No extra install step is needed.

## Prerequisites

- The [base Pushwoosh Cordova SDK](/developer/pushwoosh-sdk/cross-platform-frameworks/cordova/integration/basic-integration-guide/) already integrated and sending pushes.

## Show the inbox

Call `presentInboxUI()` on the same `pushwoosh` object you initialized with `cordova.require`:

```javascript
var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");

pushwoosh.presentInboxUI();
```

This opens a native screen (a view controller on iOS, an Activity on Android) with the SDK's default appearance.

## Customize the style

Pass a style object to `presentInboxUI()`. Every key is optional:

| Key | Customizes |
|---|---|
| `dateFormat` | Date formatting |
| `defaultImageIcon` | The default icon next to a message with no image |
| `unreadImage` | The unread-messages mark (iOS only) |
| `listErrorImage` | Shown when loading the list fails |
| `listEmptyImage` | Shown when the list has no messages |
| `listErrorMessage` | Error text (not localized) |
| `listEmptyMessage` | Empty-list text (not localized) |
| `defaultTextColor` | Default text color (iOS only) |
| `accentColor` | Accent color |
| `backgroundColor` | Background color |
| `highlightColor` | Selection color |
| `titleColor` | Message title color |
| `readTitleColor` | Title color for read messages (Android only) |
| `descriptionColor` | Message description color |
| `readDescriptionColor` | Description color for read messages (Android only) |
| `dateColor` | Message date color |
| `readDateColor` | Date color for read messages (Android only) |
| `dividerColor` | Separator color |
| `barTitle` | The inbox screen's title |
| `barBackgroundColor` | The title bar's background color |
| `barAccentColor` | The title bar's back-button color |
| `barTextColor` | The title bar's text color |

```javascript
pushwoosh.presentInboxUI({
    dateFormat: "dd.MM.yyyy",
    accentColor: "#3498db",
    backgroundColor: "#ffffff",
    titleColor: "#333333",
    descriptionColor: "#666666",
    listEmptyMessage: "No messages yet"
});
```

## Manage messages programmatically

Load the message list, read counts, and act on individual messages without opening the built-in screen. This is useful for a custom inbox UI or an unread badge:

```javascript
// Array of InboxNotification objects
pushwoosh.loadMessages(function(messages) {
    messages.forEach(function(message) {
        console.log(message.title + ": " + message.message);
    });
}, function(error) {
    console.error("Failed to load: " + error);
});

pushwoosh.unreadMessagesCount(function(count) {
    console.log("Unread messages: " + count);
});

pushwoosh.messagesCount(function(count) { /* total messages */ });
pushwoosh.messagesWithNoActionPerformedCount(function(count) { /* not yet acted on */ });

pushwoosh.readMessage(messageCode);
pushwoosh.deleteMessage(messageCode);
pushwoosh.performAction(messageCode); // runs the message's default action, e.g. opening a URL
```