)} renderSubject={(notification) => ( )} /> ``` > Only enable this if you fully control the trigger payload — raw HTML opens an XSS surface area. ### Notification click behavior Hook the Inbox into your router. Novu calls `routerPush` with the `redirect.url` defined in your workflow: ```tsx import { useRouter } from "next/navigation"; const router = useRouter(); router.push(path)} onNotificationClick={(notification) => track("inbox_notification_click", { id: notification.id })} onPrimaryActionClick={(notification) => doSomething(notification.primaryAction)} onSecondaryActionClick={(notification) => doSomethingElse(notification.secondaryAction)} /> ``` Works with React Router (`useNavigate()`), Remix (`useNavigate()`), Gatsby (`navigate()`), and any custom router. See [Personalization Reference](./references/personalization.md) for full render-prop signatures, `renderCustomActions` styling examples, popover composition with Radix / shadcn Drawer, and conditional UI patterns. ## Tabs Group notifications into tabs by **tags**, **severity**, or **`data` properties**: ```tsx import { Inbox, SeverityLevelEnum } from "@novu/react"; ``` - **Tags** are workflow-level — assign them in the workflow editor. Multiple tags use `OR` logic. - **Severity** comes from the In-App step's severity setting (`HIGH`, `MEDIUM`, `LOW`). - **`data`** comes from the [data object](#data-object) defined per In-App step. Use the [`useCounts` hook](https://docs.novu.co/platform/sdks/react/hooks/use-counts) to render unread counts per tab. ## Multi-Tenancy with Contexts Use **Contexts** to scope the Inbox to a tenant, workspace, or feature area. The Inbox shows only notifications whose trigger context matches the Inbox context exactly. ### 1. Trigger workflows with context ```typescript await novu.trigger({ workflowId: "invoice-paid", to: { subscriberId: "user-123" }, payload: { amount: "$250" }, context: { tenant: { id: "acme-corp", data: { name: "Acme Corporation", plan: "enterprise" }, }, }, }); ``` ### 2. Pass the matching context to the Inbox ```tsx ``` ### 3. Secure the context with `contextHash` Because `context` is set client-side, a hostile user could swap tenant IDs. Generate an HMAC hash of the canonicalized context server-side: ```typescript import { createHmac } from "crypto"; import { canonicalize } from "@tufjs/canonical-json"; const context = { tenant: { id: "acme-corp", data: { name: "Acme Corporation", plan: "enterprise" } }, }; const contextHash = createHmac("sha256", process.env.NOVU_SECRET_KEY!) .update(canonicalize(context)) .digest("hex"); ``` Pass it alongside the `context`: ```tsx ``` ### Context match rules | Workflow Context | Inbox Context | Displayed? | | --- | --- | --- | | `{ tenant: "acme" }` | `{ tenant: "acme" }` | ✅ | | `{}` | `{}` | ✅ | | `{ tenant: "acme" }` | `{}` | ❌ | | `{}` | `{ tenant: "acme" }` | ❌ | | `{ tenant: "acme" }` | `{ tenant: "globex" }` | ❌ | Context that doesn't yet exist in Novu is auto-created. Existing context data is **not** auto-updated to prevent overwrites. See [Multi-Tenancy Reference](./references/multi-tenancy.md) for full setup, dashboard management, and dynamic content rendering with `{{context}}`. ## Data Object Each In-App step supports a custom **data object** — up to 10 scalar key-value pairs (string, number, boolean, null; strings ≤ 256 chars) defined in the workflow editor. Values can be static (`"status": "merged"`) or dynamic (`"firstName": "{{subscriber.firstName}}"`). Access it client-side as `notification.data` and use it for render decisions, conditional styling, and tab filtering. ```tsx (

{notification.data?.emoji} {notification.data?.firstName}

{notification.body}

)} /> ``` Type the data object globally for autocomplete: ```ts declare global { interface NotificationData { reactionType?: string; entityId?: string; userName?: string; } } ``` > Don't store secrets in `data` — it's returned to the client. Never spread the entire trigger payload into `data`. ## Custom Popover Mount the notification feed inside any popover, drawer, or page layout. Use `` (or your own trigger) plus `` or ``: ```tsx import { Inbox, InboxContent, Bell } from "@novu/react"; import { Popover, PopoverTrigger, PopoverContent } from "@radix-ui/react-popover"; ``` The same pattern works with shadcn ``, Headless UI, or a route-level page (mount `` directly without any popover). All customization props (`appearance`, `localization`, `tabs`, `routerPush`, render props) flow through the `` provider. ## Localization Override Inbox UI text — useful for multi-language apps or matching your product voice: ```tsx ``` - Localization changes UI text only. To translate notification *content*, use [Workflow Translations](https://docs.novu.co/platform/workflow/advanced-features/translations). - Use the `dynamic` map to localize workflow names shown in the Preferences UI. - The full key list lives in [`defaultLocalization.ts`](https://github.com/novuhq/novu/blob/next/packages/js/src/ui/config/defaultLocalization.ts). ## HMAC Authentication **Required in production** to prevent subscriber impersonation. See https://docs.novu.co/platform/inbox/prepare-for-production for the full guide. ### Generate the hash (server-side) ```typescript import { createHmac } from "crypto"; const subscriberHash = createHmac("sha256", process.env.NOVU_SECRET_KEY!) .update(subscriberId) .digest("hex"); ``` ### Python ```python import hmac, hashlib subscriber_hash = hmac.new( NOVU_SECRET_KEY.encode(), subscriber_id.encode(), hashlib.sha256, ).hexdigest() ``` ### Pass to the component ```tsx ``` If you also pass a `context`, generate a `contextHash` (see [Multi-Tenancy](#multi-tenancy-with-contexts)). ## Common Pitfalls 1. **`applicationIdentifier` is NOT the same as `NOVU_SECRET_KEY`** — the app ID is a public identifier safe for client-side use. The secret key is server-only. 2. **HMAC hash is mandatory in production** — without it, anyone can impersonate a subscriber by guessing their ID. 3. **The Inbox only shows notifications from workflows with an `inApp` step** — if your workflow doesn't include `step.inApp()`, nothing appears. 4. **`"use client"` is required in Next.js App Router** — the Inbox component is client-side only. 5. **Real-time updates are automatic** — the Inbox uses WebSockets internally. No additional setup needed. 6. **`@novu/react` vs `@novu/nextjs`** — use `@novu/nextjs` for Next.js apps (handles SSR edge cases), `@novu/react` for all other React apps. 7. **`variables` override `baseTheme`** — when both are set in `appearance`, variables win. Set variables in dark/light themes intentionally. 8. **Element callbacks return strings** — `(context) => string` returns class names, not style objects. For style objects use a static value. 9. **Context filtering is exact-match** — passing `context={{}}` to the Inbox hides any notification triggered with a non-empty context, and vice-versa. 10. **Don't store secrets in `notification.data`** — it's sent to the client. 11. **`renderNotification` removes default actions** — use granular render props (`renderSubject`, `renderBody`, `renderAvatar`, `renderDefaultActions`, `renderCustomActions`) when you want to keep mark-as-read / archive / snooze affordances. 12. **HTML rendering requires both steps** — disabling sanitization in the workflow *and* using `dangerouslySetInnerHTML` in a render prop. Either alone has no effect. ## References - [Branding & Styling](./references/branding-and-styling.md) — full appearance API: themes, variables, elements, icons, severity, dynamic callbacks - [Personalization](./references/personalization.md) — render props, custom popover (Radix, shadcn Drawer), conditional display, click handlers - [Multi-Tenancy with Contexts](./references/multi-tenancy.md) — context-based isolation, securing contextHash, dynamic templates - [React Inbox Examples](./references/react-inbox-examples.md) - [Next.js Inbox Examples](./references/nextjs-inbox-examples.md) - [Headless Inbox (Vanilla JS)](./references/headless-inbox-examples.md) - [Security (HMAC)](./references/security.md)

{notification.subject}