Novu changelog

Custom Data Passthrough to the <Inbox /> Component

cover image

Ever wanted your Novu <Inbox /> notifications to look as detailed and interactive as GitHub's, complete with reaction icons, status markers, or contextual links? Achieving this requires specific data from your backend trigger to be available right when the notification is rendered on the front end.

Previously, this was a challenge. While you could send custom data to a workflow trigger, getting that data back out to the <Inbox /> component wasn't possible, limiting UI customization.

Now, that changes. We've enhanced our In-App template configuration step. You can now define a data object directly within the In-App template editor in your workflow.

This custom data is automatically included in the notification object delivered to the front-end and is accessible via notification.data.

What does this unlock?

Imagine passing data like:

  • reactionType: To display specific icons (e.g., 👍, ❤️, comment bubble).

  • entityId (like pullRequestId or issueId): Create direct links or show relevant badges (e.g., a GitHub logo linking to the PR).

  • status or actionType: To show visual cues like colored dots or status icons (e.g., green for 'merged', orange for 'commented').

By leveraging notification.data in your <Inbox /> component, you gain the flexibility to build deeply contextual and dynamic notification items, tailoring the look and feel based on the specific event that triggered it.

Learn More