# Message Center

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

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

# Get started with Message Center on Capacitor

> The default Message Center is available for Capacitor 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
await Airship.messageCenter.display()
```


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

## Fetch Messages

Retrieve messages from the inbox:

```js
const messages = await Airship.messageCenter.getMessages()
```


## Listen for Message Updates

Subscribe to message updates using event listeners:

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


## Listen for Unread Count Changes

Subscribe to unread count updates:

```js
const unreadCount = await Airship.messageCenter.getUnreadCount();
// Update badge or UI
```


## Refresh Messages

Manually refresh the message list from the server:

```js
await Airship.messageCenter.refreshMessages()
```


## Mark Messages as Read

Mark one or more messages as read:

```js
await Airship.messageCenter.markMessageRead("message-id")
```


## Delete Messages

Delete one or more messages:

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




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

<!-- PAGE: Embed the Message Center, PATH: https://www.airship.com/docs/developer/sdk-integration/capacitor/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 Capacitor applications. You can build a custom message list using web technologies, but individual messages must be displayed using the native overlay.

> **Note:** Capacitor 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
await Airship.messageCenter.setAutoLaunchDefaultMessageCenter(false)

// Add a listener to handle display events
Airship.messageCenter.onDisplay(event => {
  if (event.messageId) {
    // Show specific message in native overlay
    await 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
await Airship.messageCenter.showMessageView("message-id")
```




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