Overview

The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort.

Novu provides a pre-built, ready-to-use, and customizable Inbox UI component. It’s in React today, and soon will be available in other popular frameworks including Vue, React Native, and full headless.

Fully functional and customizable React Inbox component

​

Why use the Novu Inbox?

• You want to notify users directly within your application.
• Pre-built UI components make the Inbox easy to include.
• Highly customizable and can be made to exactly match your existing branding and design.
• Users can access powerful subscriber preferences management direct from the Inbox.
• Provide a multi-tab notification experience.
• Synchronize notifications across devices in real-time, powered by web sockets.
• Secure your connection using HMAC encryption.

​

Concepts

1. Subscriber - is your product user who will receive the notifications through the In-App channel.
2. Notification - is a message sent to the subscriber using an In-App channel (step) in the workflow.
3. Notifications list - the list of all notifications sent to a particular subscriber.
4. Tabs - allows to switch between notifications lists where the notifications can be grouped by particular workflow tags.
5. Notification actions - are the buttons below notification content that can be clicked to perform any action or external API call.
6. Redirect URL - when a single notification item from the list is clicked then it can be configured to perform an action or redirect to any URL.

​

Getting started

• Pre built UI component in React.
• Learn how to use headless library to build custom UI for other frameworks like Vue, Angular etc.
• React Native - Add a notification feed to your React Native app.

​

Design files

To aide your design process, we provide a free Figma file that contains all of the design assets. Make a copy of the file into your own account to get started with customizing your graphical Inbox elements.