> ## Documentation Index
> Fetch the complete documentation index at: https://docs.worldvisagroup.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Data Object

> Attach custom metadata to in-app notifications with the data object in WorldVisa workflows and read it inside the Inbox component for custom rendering.

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.

> [!NOTE]
>
> Use your application’s existing connection and authentication settings with these examples. [Set up Inbox](https://docs.worldvisagroup.com/developers/inbox/setup-inbox.md) covers the application identifier, subscriber, API and WebSocket URLs, and subscriber credentials.

## Define the data object

You define the data object inside an in-app step in your workflow on the WorldVisa 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}}`.

![Data object](https://mintcdn.com/wv-enterprise/l3bkwl1N_3mOn9aW/images/developers/inbox/data-object.png?fit=max\&auto=format\&n=l3bkwl1N_3mOn9aW\&q=85\&s=1fd7a0e7aa6d43c13497cd2037f22ab4)

> [!NOTE]
>
> The data object supports only scalar values, such as strings, numbers, booleans, or null. String values are limited to 256 characters. There is a limit of 10 data object properties per in-app step.

## 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.

```tsx theme={null}
import { Inbox } from '@wv/react';

function InboxDataObject() {
  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 InboxDataObject;
```

> [!WARNING]
>
> The data object is included in the client response. Avoid storing sensitive information, such as API keys or passwords, in `notification.data`. Workflow trigger payload may contain sensitive information, so avoid using the complete payload in the data object. Use only required and insensitive payload data in the data object.

### Add type safety (optional)

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

```tsx theme={null}
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](https://docs.worldvisagroup.com/developers/inbox/configuration/tabs.md#filter-tabs-by-data-attributes).

```tsx theme={null}
import { Inbox } from '@wv/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}
    />
  );
}
```


## Related topics

- [Channels Template Editors](https://docs.worldvisagroup.com/developers/workflow/add-notification-content/channels-template-editors.md)
- [How do subscribers work in WorldVisa?](https://docs.worldvisagroup.com/developers/concepts/subscribers.md)
- [How do contexts work in WorldVisa?](https://docs.worldvisagroup.com/developers/concepts/contexts.md)
- [Trigger](https://docs.worldvisagroup.com/developers/concepts/trigger.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.