Data Object

The data object is a customizable key-value store available in the in-app step. You can use it to extend each Inbox component notification by embedding custom data. The data can then be used to personalize how messages appear in the Inbox component.

Define the data object

You define the data object inside an in-app step in your workflow on the Novu dashboard. Each entry is a key-value pair, referred to as a property. You can define up to 10 properties per in-app step. Each property can be:

• Static: Fixed values such as "status": "merged" or "icon": "heart". or
• Dynamic: Values derived from subscriber or payload data, such as {{subscriber.firstName}} or {{payload.issueId}}.

Use the data object in the <Inbox />

The data object is available on the frontend as notification.data. You can use it inside the renderNotification function to customize how each notification is displayed.

import { Inbox } from '@novu/react';
 
function NovuDataObject() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => (
       <div>
        <p>{notification.data?.firstName}</p>            
        <p>{notification.data?.emoji}</p>
      </div>
     )}
    />
  );
}
 
export default NovuDataObject;

Add type safety (optional)

For TypeScript users, define a NotificationData interface to ensure type safety when accessing notification.data.

declare global {
  interface NotificationData {
    reactionType?: string;
    entityId?: string;
    userName?: string;
  }
}

This allows TypeScript to infer the structure of notification.data, reducing errors when accessing properties.

Use data object keys as filters for tabs

You can use data object keys as filter for tabs. For more information, refer to Tabs.

import { Inbox } from '@novu/react';
 
export default function InboxWithFilters() {
 
  const tabs = [
    {
      label: 'High Priority',
      filter: {
        data: { priority: 'high' },
      },
    },
    {
      label: 'User Activity',
      filter: {
        data: { type: 'login' },
      },
    },
  ];
 
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      tabs={tabs}
    />
  );
}