diff --git a/content/docs/platform/inbox/meta.json b/content/docs/platform/inbox/meta.json index d054f0a04..3a80dfe52 100644 --- a/content/docs/platform/inbox/meta.json +++ b/content/docs/platform/inbox/meta.json @@ -1,5 +1,6 @@ { "pages": [ + "overview", "setup-inbox", "navigation-and-events", "configuration", diff --git a/content/docs/platform/inbox/overview.mdx b/content/docs/platform/inbox/overview.mdx index 0be8bc426..f84d454f1 100644 --- a/content/docs/platform/inbox/overview.mdx +++ b/content/docs/platform/inbox/overview.mdx @@ -1,38 +1,57 @@ --- -title: 'Overview' -description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application." -icon: 'LayoutDashboard' +title: 'Introduction to Inbox' +description: "Learn how to integrate Novu Inbox component, a pre-built notification center component for real-time in-app notifications in your application." +icon: 'Inbox' --- -import { Card, Cards } from 'fumadocs-ui/components/card'; -import { MessageSquare, Palette, Zap } from 'lucide-react'; +The Novu Inbox is a prebuilt, ready-to-use, and fully customizable UI component for delivering real-time in-app notifications. It gives your subscribers a centralized place to view and manage notifications. -The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort. +With just a few lines of code, you can embed a polished, real-time notification experience directly into your application. -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. +![Introduction to inbox](/images/inbox/intro-to-inbox.png) -Fully functional and customizable React Inbox component +## Composable architecture -## Getting Started +The Novu Inbox is built with a composable architecture. It is composed of other sub-components: - - - - - +- `` – Renders the content of the `` popover. +- `` – Manages subscriber notification preferences. +- `` – Shows an unread counter and opens the inbox. +- `` – Display the list of notifications. + +![Fully functional and customizable React Inbox component](/images/inbox/overview@2x.png) + +By composing these individual components, you can create multiple popular inbox layouts that fit perfectly within your application's design. + +To aid your design process, we provide a [free Figma file](https://www.figma.com/community/file/1425407348374863860) 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. + +## Key feature +- Full stack integration: The Inbox handles UI, unread states, routing, and preferences all in one place. +- Highly customizable: Override styles, replace every UI elements and icons. +- Flexible layouts: Use the default Inbox UI layout or build your own. +- Built-in support for Tabs and filters, localization, snoozing, preferences management, and more. + +## How it works + +At a high level, the Inbox abstracts away the complexity of building a notification center. + +1. When you drop the Inbox component into your application, it securely connects to Novu's services. +2. It automatically fetches user notifications and manages the real-time unread count displayed on the bell icon. +3. When a user clicks the bell, it presents the list of notifications and user preferences. +4. All user interactions, such as marking a notification as read or changing a preference, are automatically synchronized with the Novu backend in real-time. + +## Ways to implement the Novu Inbox + +There are two integration approaches, depending on your needs for speed versus customization. + +### The "Plug-and-Play" approach + +This is the fastest way to integrate the Novu Inbox. The Inbox component, encapsulate all the UI and logic. You simply drop the component into your application, configure it with the necessary properties, and you're done. + +### Build-Your-Own" Approach + +For maximum flexibility and complete control over the look and feel, use the [@novu/react SDK](/platform/sdks/react) for react hooks or [@novu/js SDK](/platform/sdks/javascript) for framework agnostic javascript methods. + +You get the power of Novu's notification engine while building a user interface that perfectly matches your application's design system. -## Design Files -To aide your design process, we provide a free [Figma file](https://www.figma.com/community/file/1425407348374863860) 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. diff --git a/public/images/inbox/intro-to-inbox.png b/public/images/inbox/intro-to-inbox.png new file mode 100644 index 000000000..37b86f3b8 Binary files /dev/null and b/public/images/inbox/intro-to-inbox.png differ