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 your inbox in any page 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 ...
});

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 notificare-web/user-inbox sub-package.

There are some requirements to use this functionality, namely:

1. Set the User Registration to API Level via the Dashboard;
2. Enable the user-based inbox setting via the Dashboard;
3. 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 function to assist you in decoding the response. Assuming your API relays the response given by the Notificare REST API, you can use the parseInboxResponse function 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}}/user-inbox', {
  headers: {
    Authorization: 'Bearer {{token}}',
  },
});

const json = await response.json();
const { items, count, unread } = await parseInboxResponse(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:

import { openInboxItem } from 'notificare-web/user-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/user-inbox';

await removeInboxItem(item);

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

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

await markInboxItemAsRead(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.