Inbox

In this page you'll learn how to build an app inbox with all the options at your disposal to create a great messaging experience for your users.

With our library it's extremely easy to implement an in-app inbox. Implementing an inbox increases considerably the engagement rate of your notifications simply because messages will always be available inside your app. To activate the inbox functionality, please follow the instructions described here.

After activating this functionality, you can start implementing an inbox on your app.

Device-level inbox

The standard approach is to use the device-level inbox. Each device will have its own independent inbox, regardless of the associated user. The device-level inbox is available via the capacitor-notificare-inbox package. The inbox itself is exposed via events from NotificareInbox, so it is really easy to hook up your views to a list of inbox items, for example:

NotificareInbox.onInboxUpdated((items) => {
  // Do something with the items.
});

In the same way, you can listen for the number of unread messages.

NotificareInbox.onBadgeUpdated((badge) => {
  // Do something with the badge.
});

If you want to get the data at any point in time, you can still get the items and the badge in the inbox.

// Items
const items = await NotificareInbox.getItems();

// Badge
const badge = await NotificareInbox.getBadge();

Managing inbox items

Assuming that you hold a reference to an item, to open an inbox item you would simply do something like this:

const notification = await NotificareInbox.open(item);

// Optional: Present the notification with Push UI.
await NotificarePushUI.presentNotification(notification);

To remove items from the inbox you would invoke the following method:

await NotificareInbox.remove(item);

Additionally, you can also mark a message as read by invoking the following method:

await NotificareInbox.markAsRead(item);

Or mark all messages as read by invoking the following method:

await NotificareInbox.markAllAsRead();

To remove all items in the inbox you would do the following:

await NotificareInbox.clear();

User-level inbox

By enabling the user inbox, you can have a unique inbox for your users, regardless of how many devices they may have. The user-level inbox is available via the capacitor-notificare-user-inbox package.

There are some requirements to use this functionality, namely:

• Enable the user-based inbox setting via the Dashboard;
• Set the User Registration to API Level via the Dashboard (your app > settings > configure app);
• Register your users via the API instead of the SDK.

Given that user authentication must take place in your API, you'll have to perform some actions through it.

Fetching the user inbox

The inbox must be fetched through your API, but we provide a data model to assist you in decoding the response. Assuming your API relays the response given by the Notificare REST API, you can use the NotificareUserInbox module to take care of the decoding.

To illustrate the request, below is a simple example using the Fetch API.

const response = await fetch('https://{{YOUR_API}}/inbox', {
  headers: {
    'Authorization': 'Bearer ...'
  }
});

const json = await response.json();
const userInbox = await NotificareUserInbox.parseResponseFromJson(json);

Managing inbox items

Assuming that you hold a reference to an item, to open an inbox item you would simply do something like this:

const notification = await NotificareUserInbox.open(item);

// Optional: Present the notification with Push UI.
await NotificarePushUI.presentNotification(notification);

To remove items from the inbox you would invoke the following method:

await NotificareUserInbox.remove(item);

Additionally, you can also mark a message as read by invoking the following method:

await NotificareUserInbox.markAsRead(item);

To mark all messages as read or to remove all items, you must do so through your API. Check with your API team for the integration details. For more information, you can check our REST API documentation.