This page is part of the Customer.io documentation. For the complete documentation index, see llms.txt.

55

Notification inbox

How it works

Unlike other messages, inbox messages don’t necessarily appear immediately to your audience, and they don’t disappear when a person dismisses them. Instead, messages collect in a notification inbox that people can check at their leisure. You send inbox messages as part of an automation, broadcast, or transactional message.

The SDK gives you two ways to show the inbox in your app:

• Recommended: add the visual inbox. Mount the SDK’s ready-made inbox views—a bell icon with an unread badge and a panel that lists messages. The SDK renders the inbox you style and publish in Customer.io using native UI—no webviews—and handles fetching messages, unread counts, opens, and clicks for you.
• Advanced: build your own inbox. The SDK delivers inbox messages as JSON payloads, and you render them in your own inbox UI. Take this path when you need complete control over the inbox experience.

Add the visual inbox

The visual inbox renders the same inbox you publish for your website: your icon, colors, position, unread indicator, and message templates—including dark mode styles. When there’s nothing to show—the inbox isn’t published or has no messages—the inbox views render nothing, so they’re safe to mount unconditionally.

Prerequisites

• Create, style, and publish a notification inbox in your workspace.
• Set up in-app messaging in your app. The inbox views build on the in-app messaging module.
• Update to the latest version of the Expo SDK. The visual inbox ships with the SDK—there’s no separate module to install.

Add the inbox to your app

The visual inbox views come from the customerio-reactnative package. NotificationInboxOverlayView is the all-in-one option: a floating bell button with an unread badge that slides out the message list, with a scrim that closes it when a person taps outside. Mount it once, near the root of your view hierarchy, so it sits on top of your content.

import { NotificationInboxOverlayView } from 'customerio-reactnative';
import { StyleSheet, View } from 'react-native';

export function RootView() {
  return (
    <View style={{ flex: 1 }}>
      <AppContent />
      <NotificationInboxOverlayView style={StyleSheet.absoluteFill} />
    </View>
  );
}

That’s the whole integration. The overlay fetches messages, shows and updates the unread badge, marks messages opened when the panel opens, and reports opens and clicks to your inbox metrics.

Place the bell and message list yourself

If the floating overlay doesn’t fit your design, compose the two underlying views directly:

• NotificationInboxBellView: the bell button with the unread badge. Place it anywhere—a header, a tab bar, a corner—and use its onTap callback to present your inbox. The bell renders nothing when there’s nothing to show, so give it a fixed size via style for predictable layout.
• NotificationInboxView: the message list without any surrounding chrome. Embed it in a modal, a tab, or a dedicated inbox screen, and give it a size via style (for example, { flex: 1 }).

import {
  NotificationInboxBellView,
  NotificationInboxView,
} from 'customerio-reactnative';
import { useState } from 'react';
import { Modal, View } from 'react-native';

export function DashboardView() {
  const [isInboxVisible, setInboxVisible] = useState(false);

  return (
    <View style={{ flex: 1 }}>
      <NotificationInboxBellView
        style={{ width: 56, height: 56 }}
        onTap={() => setInboxVisible(true)}
      />
      <Modal visible={isInboxVisible} onRequestClose={() => setInboxVisible(false)}>
        <NotificationInboxView style={{ flex: 1 }} />
      </Modal>
    </View>
  );
}

Handle message actions

When a person taps a message or a button inside it, the SDK runs the action you set on the message: it opens URLs, removes the message for dismiss actions, and so on. If your messages use deep links or you want to route navigation through your own code, register an inbox event listener on the in-app messaging module.

import { CustomerIO, InboxEventType } from 'customerio-reactnative';

const subscription = CustomerIO.inAppMessaging.registerInboxEventListener((event) => {
  if (event.eventType === InboxEventType.messageActionTaken) {
    // Navigate within your app
    if (event.actionValue?.startsWith('myapp://')) {
      DeepLinkRouter.open(event.actionValue);
    }
  }
});

// Call subscription.remove() to stop listening and restore the SDK's default action handling

Each event carries an eventType you can switch on for analytics or app state:

Visual inbox behaviors

• The bell hides itself when there’s nothing to show. If your inbox isn’t published, or the person has no messages, the bell and panel don’t render at all.
• Opening the inbox marks messages opened. Messages visible in the open panel—or in an embedded NotificationInboxView—are marked opened automatically, and the unread badge updates to match.
• Dismissing a message deletes it. When a person dismisses a message, the SDK removes it from their inbox on every device.
• Dark mode is automatic. The inbox follows the device’s appearance and re-renders when it changes, using the dark mode colors you set in Design Studio.
• Style changes flow to your app. When you update your inbox’s styles or templates in Customer.io, the SDK picks up the changes on its next refresh—no app update required.

Build your own inbox

If you need complete control over the inbox experience, skip the visual inbox and work with the message payloads directly. Customer.io delivers inbox messages as JSON payloads, not fully rendered messages. The SDK helps you listen for these payloads, but you determine how to display them in your own inbox client.

Get the inbox instance

You’ll access inbox functionality through the inbox() method on the in-app messaging module.

const inbox = CustomerIO.inAppMessaging.inbox();

Inbox methods

The inbox instance provides several methods to manage messages.

Inbox message payloads

Inbox messages are delivered as a JSON payload. The SDK helps you listen for the payload, but you’ll render the content in your own inbox client.

The client payload includes the following fields, but you’re most concerned with the properties object, which represents your message content. By default, we’ll send a title and body field, but you can add other fields like an image or a link—whatever you set up your inbox to expect.

Make sure that your team members know what payloads to send—especially if you expect different payloads for different topics or types of messages.

{
    "messageId": "1234567890",
    "sentAt": "2026-02-05T12:00:00Z",
    "expiresAt": "2026-02-05T12:00:00Z",
    "opened": false,
    "topics": ["orders", "shipping"],
    "type": "order_shipped",
    "properties": {
        "title": "Hey Cool Person, your order shipped!",
        "body": "You can track your order #1234567890 here:",
        "link": "https://example.com/orders/1234567890"
    }
}

Inbox topics and types

When you send an inbox message, you can assign it to one or more topics. You can use these topics to filter messages when you fetch them. You can also use the topics to determine how to render the messages in your notification inbox.

Messages also have a type. Think of this like a sub-category or topic for a message. For example, you might have orders and sale topics, where orders don’t have images but sale topics might. Or, within the orders topic, you might have order_placed and order_shipped types, where order_placed lists order details and images of purchased products and order_shipped provides a link to the tracking information for the order that opens in a new tab.

Setup your notification inbox

Inbox messages are just JSON payloads. You’ll need to build your own inbox client to display the messages. The code below gives you a starting point, but you can build your own inbox client however you want.

Fetch messages

// Fetch all messages
const messages = await inbox.getMessages();

// Fetch messages filtered by topic
const promotions = await inbox.getMessages('promotions');

Subscribe to inbox updates

// Subscribe to all messages
const subscription = inbox.subscribeToMessages({
  onMessagesChanged: (messages) => {
    console.log('Messages updated:', messages);
    // Update your UI with the messages
    setMessages(messages);
  }
});

// Subscribe to messages filtered by topic
const topicSubscription = inbox.subscribeToMessages({
  onMessagesChanged: (messages) => {
    console.log('Topic messages:', messages);
    // Update your UI with filtered messages
    setTopicMessages(messages);
  }
}, 'announcements');

// Don't forget to unsubscribe when you're done
subscription.remove();
topicSubscription.remove();

Mark messages as opened or unopened

// Mark a message as opened
inbox.markMessageOpened(message);

// Mark a message as unopened
inbox.markMessageUnopened(message);

Track message clicks

// Track a click without an action name
inbox.trackMessageClicked(message);

// Track a click with an action name
inbox.trackMessageClicked(message, 'view_offer');

Delete messages

// Mark a message as deleted
inbox.markMessageDeleted(message);

Working with message properties

You can access message properties to display custom content in your inbox:

// Access message properties
const { title, body, link, image } = message.properties;

// Handle message action when user taps
const handleMessagePress = (message) => {
  // Mark as opened
  inbox.markMessageOpened(message);

  // Track click
  inbox.trackMessageClicked(message);

  // Open link if available
  if (message.properties.link) {
    Linking.openURL(message.properties.link);
  }
};

// Track with specific action name
const handleActionButton = (message, actionType) => {
  inbox.markMessageOpened(message);
  inbox.trackMessageClicked(message, actionType);

  // Navigate based on action
  switch (actionType) {
    case 'view_offer':
      navigation.navigate('OfferDetails', { offerId: message.properties.offerId });
      break;
    case 'view_order':
      navigation.navigate('OrderDetails', { orderId: message.properties.orderId });
      break;
  }
};