Conditional Display

The Inbox component supports conditional display of notifications using the renderNotification prop. This function receives the full notification object and returns a custom React element. You can use workflow data such as tags, identifiers, data object or notification severity to control how notifications are displayed in the notification UI. This lets you create dynamic, personalized notification UI for your subscribers.

Use your application’s existing connection and authentication settings with these examples. Set up Inbox covers the application identifier, subscriber, API and WebSocket URLs, and subscriber credentials.

Display notifications based on workflow tags

You can conditionally display customized notification based on workflow tags. These tags are defined in your workflow and are accessible via notification.tags property.

Inbox filters use the tags copied onto the notification at create time. Changing workflow tags later does not update historical notifications. See Tags.

import { Inbox } from '@wv/react';

export default function CustomInbox() {
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => {
        // filter based on tags
        if (notification.tags?.includes('custom')) {
          return (
            <div>
              <h3>Custom Notification Subject</h3>
              <p>Custom Notification Body</p>
            </div>
          );
        }
        // default
        return (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
          </div>
        );
      }}
    />
  );
}

Display notifications based on workflow identifier or name

Each workflow has a name and a unique identifier, accessible through notification.workflow.name and notification.workflow.identifier, respectively. Either property can be used to conditionally render notifications.

import { Inbox } from '@wv/react';
export default function CutomInbox() {
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => {
        // filter based on workflow identifier
        if (notification.workflow?.identifier === 'demo') {
          return (
            <div style={{ backgroundColor: 'blue' }}>
              <h3>{notification.subject}</h3>
              <p>{notification.body}</p>
            </div>
          );
        }
        // filter based on workflow name
        if (notification.workflow?.name === 'Custom') {
          return (
            <div style={{ backgroundColor: 'blue' }}>
              <h3>{notification.subject}</h3>
              <p>{notification.body}</p>
            </div>
          );
        }
        // default
        return (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
          </div>
        );
      }}
    />
  );
}

Display notifications based on data object

You can also use values from the notification data object to render notifications conditionally. These values are accessible via notification.data and typically contain custom payload fields.

import { Inbox } from '@wv/react';
export default function CutomInbox() {
  
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => {
       // filter based on data object key
       if (notification.data?.priority) {
        return (
          <div style={{ backgroundColor: 'red' }}>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
          </div>
        );
      }
        // default
        return (
          <div>
            <h3>{notification.subject}</h3>
            <p>{notification.body}</p>
          </div>
        );
      }}
    />
  );
}

Display notifications based on notification severity

You can access the severity field on each notification object. This enables conditional rendering in custom UIs.

import { Inbox, SeverityLevelEnum } from '@wv/react';
export default function CutomInbox() {
 
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => {
        // render based on severity value
        if (notification.severity === SeverityLevelEnum.HIGH) {
          return (
            <div style={{ backgroundColor: 'red' }}>
              <h3>{notification.subject}</h3>
              <p>{notification.body}</p>
            </div>
          );
        }
        
        return (
           <div>
             <h3>{notification.subject}</h3>
             <p>{notification.body}</p>
           </div>
        );
      }}
    />
  );
}

Getting Started

Integrate <Inbox />

Build a Workflow

Integrate Channels Providers

Account

Display notifications based on workflow tags

Display notifications based on workflow identifier or name

Display notifications based on data object

Display notifications based on notification severity

​Display notifications based on workflow tags

​Display notifications based on workflow identifier or name

​Display notifications based on data object

​Display notifications based on notification severity

Display notifications based on workflow tags

Display notifications based on workflow identifier or name

Display notifications based on data object

Display notifications based on notification severity