skills.rest
novuhq
novuhqOFFICIAL
Explore all skills by this author →
Website𝕏@novuhqGitHub

novu-inbox-integration

Integrate Novu's in-app notification inbox into React, Next.js, and vanilla JavaScript applications.

39.7k|4.4k|Updated Aug 26, 2021
Search Tags:#NextJS#web components#hmac#novu#reAct#in-app notifications#notification inbox
One-click install
npx skills add https://github.com/novuhq/novu --skill novu-inbox-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: novu-inbox-integration
Source: https://github.com/novuhq/novu/tree/main/docs/.mintlify/skills/inbox-integration
Command: npx skills add https://github.com/novuhq/novu --skill novu-inbox-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @novu/react, @novu/nextjs, @novu/js, and includes references (resource) components.

What problem does it solve?

Adding a real-time in-app notification center to a web application normally requires building a bell icon, notification feed, read/archive state management, WebSocket updates, and preference controls from scratch. This Skill provides the integration patterns, component APIs, and security setup needed to embed Novu's prebuilt Inbox into React, Next.js, or vanilla JavaScript apps.

Core Features & Use Cases

  • Drop-in Inbox Component: Render a bell icon with unread count and a popover notification feed using @novu/react, @novu/nextjs, or @novu/js, with real-time WebSocket updates built in.
  • Theming and Personalization: Customize appearance via base themes, design tokens, per-element styles, custom icons, render props, tabs, localization, and composable primitives like <Bell />, <Notifications />, and <Preferences />.
  • Multi-Tenancy and Security: Scope notifications per tenant with contexts, and secure the integration with HMAC subscriber hashes and context hashes generated server-side.
  • Use Case: A SaaS team adds a branded notification center to their Next.js dashboard — grouped into tabs by workflow tags, styled to match their design system, and isolated per customer tenant — without building any notification infrastructure themselves.

Quick Start

Add a Novu notification inbox to my React app with the application identifier, subscriber ID, and an HMAC subscriber hash generated on my server.

Frequently Asked Questions about novu-inbox-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a notification inbox to a React app?▼

Install @novu/react and render the <Inbox> component with your applicationIdentifier, subscriberId, and subscriberHash. It displays a bell icon with unread count that opens a popover notification feed with real-time updates.

What is the difference between @novu/react and @novu/nextjs?▼

Use @novu/nextjs for Next.js applications because it handles SSR edge cases in both App Router and Pages Router. Use @novu/react for all other React applications, and @novu/js for vanilla JavaScript or non-React frameworks.

Does the Novu Inbox work with Next.js App Router?▼

Yes, but the Inbox is a client-side only component, so you must add the "use client" directive to the component that renders it. Create a client wrapper component and use it inside server components or layouts.

Why is my Novu Inbox not showing any notifications?▼

The Inbox only displays notifications from workflows that include an inApp step. Also verify the subscriberHash is correct if HMAC is enabled, and that any context passed to the Inbox exactly matches the context used at trigger time.

How do I customize the Novu Inbox styling?▼

Use the appearance prop with baseTheme for predefined themes like dark, variables for global design tokens, elements for per-element styles via class names or style objects, and icons to replace built-in icons with your own React components.

Is the HMAC subscriber hash required for the Novu Inbox?▼

HMAC is mandatory in production to prevent subscriber impersonation. Generate the hash server-side with HMAC-SHA256 of the subscriber ID using your NOVU_SECRET_KEY, then pass it as the subscriberHash prop.

Related Skills

Explore More Software Engineering Skills→
novuhqnovuhq
3

novu-manage-subscribers

Create, update, and organize subscriber profiles with topic and credential settings via the Novu SDK.

Official
Intermediate
TimeKastTimeKast

sk-notifications

Dispatch user notifications across in-app, email, and push channels.

Official
Advanced
richardadonnellrichardadonnell
45

radix-ui-design-system

Build accessible React design systems with Radix UI primitives.

Community
Advanced
nthplusionthplusio

mcp-integration

Bundle MCP servers with Claude plugins via standardized .mcp.json configurations.

Official
Intermediate