Skip to main content

Web Push - Implementing an 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.

The inbox feature is activated by default by Actito teams when they set-up your integration.

After activating this functionality, you can start implementing your inbox in any view controller of 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 inbox is available via the notificare-web/inbox sub-package.

To get all the items in the inbox you can invoke the following:

import { fetchInbox } from 'notificare-web/inbox';

const { items, count, unread } = await fetchInbox();

Optionally, you can pass an options object to the fetchInbox function to parameterize the request.

const inbox = await fetchInbox({
  since: '',    // (optional) A string representation of an ISO date.
  skip: 0,      // (optional) A number representing how many records the query should skip.
  limit: 100,   // (optional) A number representing how many record the query should fetch.
});

Managing inbox items​

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

import { openInboxItem } from 'notificare-web/inbox';
import { presentNotification } from 'notificare-web/push-ui';

const notification = await openInboxItem(item);

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

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

import { removeInboxItem } from 'notificare-web/inbox';

await removeInboxItem(item);

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

import { markInboxItemAsRead } from 'notificare-web/inbox';

await markInboxItemAsRead(item);

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

import { markAllInboxItemsAsRead } from 'notificare-web/inbox';

await markAllInboxItemsAsRead();

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

import { clearInbox } from 'notificare-web/inbox';

await clearInbox();

Whenever a message is opened, mark as read, deleted or all inbox items are cleared, the following event will be triggered:

import { onBadgeUpdated } from 'notificare-web/inbox';

onBadgeUpdated((badge) => {
  // more code ...
});