diff --git a/content/docs/platform/inbox/advanced-customization/custom-bell.mdx b/content/docs/platform/inbox/advanced-customization/custom-bell.mdx deleted file mode 100644 index d027dc5f2..000000000 --- a/content/docs/platform/inbox/advanced-customization/custom-bell.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 'Custom Bell' -description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application." -icon: 'LayoutDashboard' ---- - -import { Card, Cards } from 'fumadocs-ui/components/card'; -import { MessageSquare, Palette, Zap } from 'lucide-react'; - -The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort. diff --git a/content/docs/platform/inbox/advanced-customization/custom-notification.mdx b/content/docs/platform/inbox/advanced-customization/custom-notification.mdx deleted file mode 100644 index c9df4ac52..000000000 --- a/content/docs/platform/inbox/advanced-customization/custom-notification.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 'Custom Notification' -description: "Learn how to integrate Novu , a pre-built notification center component for real-time in-app notifications in your application." -icon: 'LayoutDashboard' ---- - -import { Card, Cards } from 'fumadocs-ui/components/card'; -import { MessageSquare, Palette, Zap } from 'lucide-react'; - -The Inbox component enables a rich context-aware in-app notifications center directly in your application, and with minimal effort. diff --git a/content/docs/platform/inbox/advanced-customization/customize-bell-and-popover.mdx b/content/docs/platform/inbox/advanced-customization/customize-bell-and-popover.mdx new file mode 100644 index 000000000..d2b28ddbf --- /dev/null +++ b/content/docs/platform/inbox/advanced-customization/customize-bell-and-popover.mdx @@ -0,0 +1,136 @@ +--- +title: 'Customize Bell and Popover' +description: "Learn how to fully customize the inbox component bell and trigger a custom notification feed using your own components or third-party libraries." +icon: 'BellRing' +--- + +Novu's Inbox component provides a built-in notification bell and popover that displays the notification feed. + +This default behavior is suitable for most use cases, but you may want to customize the bell icon or control how and where the notification list is displayed, especially when integrating with your own design system or third-party UI libraries. + +## Replace the default bell icon + +Use the `renderBell` prop to replace the default bell icon in the inbox component with your own custom component. + +![Custom bell](/images/inbox/custom-bell.gif) + + + + +```tsx +import { Inbox } from '@novu/react'; + +function CustomBell() { + return ( + { + return ( +
+ New notifications +
+ ); + }} + /> + ); +} +export default CustomBell; +``` + + + + +```tsx +import { Inbox } from '@novu/react'; + +function CustomBell() { + return ( + { + return ( +
New {unreadCount }notifications
+ ); + }} + /> + + ); +} +export default CustomBell; +``` + + + + + +## Custom popover trigger + +By default, the Inbox component displays the notification popover containing the notification list when the bell icon is clicked. However, you can decouple the display logic and mount the notification content inside your own panel or modal component. + +Use the `` and `` component to display just the notification list. This provides a flexible way to customize the inbox display using external UI libraries like [Radix UI](https://www.radix-ui.com/) or [Shadcn](https://ui.shadcn.com/docs/installation) while maintaining all the core notification functionality. + + and Radix UI', 'Using and Radix UI']}> + +```tsx +import { Inbox, InboxContent, Bell } from '@novu/react'; + import { Popover, PopoverTrigger } from '@radix-ui/react-popover'; +import { PopoverContent } from '@radix-ui/react-popover'; + + +function CustomPopoverPage() { + + return ( + + + + + + + + + + + ); +} + +export default CustomPopoverPage; +``` + + + + +```tsx +import { Inbox, Notifications, Bell } from '@novu/react'; + import { Popover, PopoverTrigger } from '@radix-ui/react-popover'; +import { PopoverContent } from '@radix-ui/react-popover'; + + +function CustomPopoverPage() { + + return ( + + + + + + + + + + + ); +} + +export default CustomPopoverPage; +``` + + + \ No newline at end of file diff --git a/content/docs/platform/inbox/advanced-customization/customize-notification-ui.mdx b/content/docs/platform/inbox/advanced-customization/customize-notification-ui.mdx new file mode 100644 index 000000000..c922f32bd --- /dev/null +++ b/content/docs/platform/inbox/advanced-customization/customize-notification-ui.mdx @@ -0,0 +1,257 @@ +--- +title: 'Customize Notification UI' +description: "Learn how to use render props to change the look of notifications with the Inbox component, customize subjects and bodies, and apply conditional display logic." +icon: 'Replace' +--- + +Novu provides render props that can be used to customize specific parts of the default notfication item seen in the Inbox UI such as subject, body, and the whole notfication. + +Each render prop receives the full notification object, giving you access to all the data needed to build a fully custom UI. + +## Customize the notification subject + +Use the `renderSubject` prop to provide a custom component for the notification's subject line while keeping the rest of the notification style intact. + +![Customize notfication subject](/images/inbox/custom-notification-subject.png) + +```tsx +import { Inbox } from '@novu/react'; + +function NovuInbox() { + return ( + ( + {notification.subject.toUpperCase()} + )} + /> + ); +} + +export default NovuInbox; +``` + +## Customize the notification body + +Use `renderBody` if you want to keep the default Inbox UI and only change how the body is rendered. This is useful when you want to customize content formatting or include additional fields from the data object. + +![Customize notfication subject](/images/inbox/custom-notification-body.png) + +```tsx +import { Inbox } from '@novu/react'; + +function NovuInbox() { + return ( + ( +
+

đź”” New alert: {notification.body}

+
+ )} + /> + ); +} + +export default NovuInbox; +``` + +## Customize the entire notification item + +Use the `renderNotification` prop to customize the entire notification item in the Inbox UI, including the container, layout, and the content of the subject and body of each notification. + +![Customize notfication](/images/inbox/custom-notification.png) + +```tsx +import { Inbox } from '@novu/react'; + +function NovuInbox() { + return ( + ( +
+

{notification.subject}

+

{notification.body}

+
+ )} + /> + ); +} + +export default NovuInbox; +``` + +## Conditionally display notifications + +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 tags, workflow identifiers, or workflow data object to control how each notification is rendered. + +This lets you vary the layout, styling, or content structure of the notification UI, creating dynamic, personalized notification displays for your subscribers. + +### Display notifications based on workflow tags + +You can conditionally display customized notification based on [workflow tags](/platform/concepts/workflows#workflow-tags). These tags are defined in your workflow and are accessible via `notification.tags` property. + +```tsx +import { Inbox } from '@novu/react'; + +export default function CustomInbox() { + + return ( + { + // filter based on tags + if (notification.tags?.includes('custom')) { + return ( +
+

Custom Notification Subject

+

Custom Notification Body

+
+ ); + } + // default + return ( +
+

{notification.subject}

+

{notification.body}

+
+ ); + }} + /> + ); +} +``` + +### Display notifications based on workflow identifier or name + +Each workflow has a [name and a unique identifier](/platform/concepts/workflows#workflow-identifier), accessible through `notification.workflow.name` and `notification.workflow.identifier`, respectively. Either property can be used to conditionally render notifications. + +```tsx +import { Inbox } from '@novu/react'; +export default function CutomInbox() { + + return ( + { + // filter based on workflow identifier + if (notification.workflow?.identifier === 'demo') { + return ( +
+

{notification.subject}

+

{notification.body}

+
+ ); + } + // filter based on workflow name + if (notification.workflow?.name === 'Custom') { + return ( +
+

{notification.subject}

+

{notification.body}

+
+ ); + } + // default + return ( +
+

{notification.subject}

+

{notification.body}

+
+ ); + }} + /> + ); +} +``` + +### Display notifications based on data object + +You can also use values from the notification [data object](/platform/inbox/configuration/data-object) to render notifications conditionally. These values are accessible via `notification.data` and typically contain custom payload fields. + +```tsx +import { Inbox } from '@novu/react'; +export default function CutomInbox() { + + return ( + { + // filter based on data object key + if (notification.data?.priority) { + return ( +
+

{notification.subject}

+

{notification.body}

+
+ ); + } + // default + return ( +
+

{notification.subject}

+

{notification.body}

+
+ ); + }} + /> + ); +} +``` + +## Display the standalone notification feed + +For situations where you don't need the default popover and bell trigger, you can use the `` or `` components to be displayed just the list of notifications. This is useful for embedding the notification list directly into a page or a custom popover component. + +Both components support the same customization props as ``, except for configuration options (like `applicationIdentifier`, `subscriber`, and `renderBell`). + +', 'Using ']}> + +```tsx +import { Inbox, InboxContent } from '@novu/react'; + +function NotificationFeed() { + + return ( + + + + ); +} + +export default NotificationFeed; +``` + + + + +```tsx +import { Inbox, Notifications } from '@novu/react'; + +function NotificationFeed() { + + return ( + + + + ); +} + +export default NotificationFeed; +``` + + + \ No newline at end of file diff --git a/content/docs/platform/inbox/advanced-customization/html-in-notifications.mdx b/content/docs/platform/inbox/advanced-customization/html-in-notifications.mdx new file mode 100644 index 000000000..4eaf0e42a --- /dev/null +++ b/content/docs/platform/inbox/advanced-customization/html-in-notifications.mdx @@ -0,0 +1,111 @@ +--- +pageTitle: 'Use HTML in Notification Content' +title: 'HTML in Notifications' +description: 'Learn how to enable and display raw HTML in the notification subject and body for rich formatting.' +icon: 'Code' +--- + +By default, Novu sanitizes the `subject` and `body` of all in-app step notifications to ensure that they are safe to display. This process prevents security risks by removing suspicious HTML tags (like `