1. Home
  2. /Developer
  3. /SDK Integrations
  4. /Capacitor
  5. /Message Center
  6. /Embed the Message Center

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:

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

await Airship.messageCenter.showMessageView("message-id")