# Message Center

Implement Message Center to provide an inbox for rich HTML-based messages.

<!-- PAGE: Get started with Message Center on Cordova, PATH: https://www.airship.com/docs/developer/sdk-integration/cordova/message-center/getting-started/ -->

# Get started with Message Center on Cordova

> The default Message Center is available for Cordova with minimal integration required. Basic theming options are supported.
Message Center provides an inbox for rich, HTML-based messages. Learn more about Message Center in our [feature guide](https://www.airship.com/docs/guides/features/messaging/message-center/).

## Display the Message Center

Display the Message Center with a single method call:

```js
Airship.messageCenter.display();
```


To build a custom message list, see [Embedding the Message Center](https://www.airship.com/docs/developer/sdk-integration/cordova/message-center/embedding/). Individual messages will still display as a native overlay.

## Fetch Messages

Retrieve messages from the inbox:

```js
Airship.messageCenter.getMessages((messages) => {
  console.log('Inbox messages: ' + messages);
});
```


## Listen for Message Updates

Subscribe to message updates using event listeners:

```js
Airship.addListener('messageCenterUpdated', () => {
  Airship.messageCenter.getMessages((messages) => {
    // Handle messages
  });
});
```


## Listen for Unread Count Changes

Subscribe to unread count updates:

```js
Airship.messageCenter.getUnreadCount((unreadCount) => {
  // Update badge or UI
});
```


## Refresh Messages

Manually refresh the message list from the server:

```js
Airship.messageCenter.refreshMessages(
  () => {
    console.log('Refreshed');
  },
  (error) => {
    console.log('Failed: ' + error);
  }
);
```


## Mark Messages as Read

Mark one or more messages as read:

```js
Airship.messageCenter.markRead("message-id");
```


## Delete Messages

Delete one or more messages:

```js
Airship.messageCenter.deleteMessage("message-id");
```




<!-- /PAGE: Get started with Message Center on Cordova -->

<!-- PAGE: Embed the Message Center, PATH: https://www.airship.com/docs/developer/sdk-integration/cordova/message-center/embedding/ -->

# Embed the Message Center

> Create custom Message Center lists with full control over design and navigation.
This guide covers creating custom Message Center list implementations for Cordova applications. You can build a custom message list using web technologies, but individual messages must be displayed using the native overlay.

> **Note:** Cordova does not support embedding native message views. Use `showMessageView()` to display individual messages as an overlay.


## Override Default Display Behavior

To use a custom Message Center list instead of the default UI, disable auto-launch and add a listener to handle display events:

```js
// Disable the default UI
Airship.messageCenter.setAutoLaunchDefaultMessageCenter(false);

// Add a listener to handle display events
Airship.messageCenter.onDisplay((event) => {
  if (event.messageId) {
    // Show specific message in native overlay
    Airship.messageCenter.showMessageView(event.messageId);
  } else {
    // Navigate to your custom message list
    navigateToCustomMessageList();
  }
});
```


## Displaying Individual Messages

Use `showMessageView` to display messages in a native overlay:

```js
Airship.messageCenter.showMessageView("message-id");
```




<!-- /PAGE: Embed the Message Center -->