Novu provides the @novu/react package that helps to add a fully functioning Inbox to your web application in minutes. Let’s see how easily you can use it in your application.

1

Install the Inbox package

npm install @novu/react
2

Add the inbox code to your react file

'use client';

import { Inbox } from '@novu/react';
import { useRouter } from 'next/navigation';

function Novu() {
  const router = useRouter();

  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      routerPush={(path: string) =>  router.push(path)}
    />
  );
}

You can find the applicationIdentifier in the Novu Dashboard under the API keys page. The subscriberId is the unique identifier of the user in your application, learn more about subscribers here.

Novu uses the routerPush prop to make your notifications navigatable. We will automatically pass the redirect.url from your workflow definitions to the routerPush prop.

3

Trigger a notification

Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action. To create your first workflow, follow our quickstart guide.

The Inbox Component

​
Next Steps

Customize the inbox

Learn how to customize the inbox with your own branding and design.

Learn the components

Learn more about the composable components of the inbox.

​
Frequently Asked Questions

Novu provides the @novu/react package that helps to add a fully functioning Inbox to your web application in minutes. Let’s see how easily you can use it in your application.

1

Install the Inbox package

npm install @novu/react
2

Add the inbox code to your react file

'use client';

import { Inbox } from '@novu/react';
import { useRouter } from 'next/navigation';

function Novu() {
  const router = useRouter();

  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriberId="YOUR_SUBSCRIBER_ID"
      routerPush={(path: string) =>  router.push(path)}
    />
  );
}

You can find the applicationIdentifier in the Novu Dashboard under the API keys page. The subscriberId is the unique identifier of the user in your application, learn more about subscribers here.

Novu uses the routerPush prop to make your notifications navigatable. We will automatically pass the redirect.url from your workflow definitions to the routerPush prop.

3

Trigger a notification

Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action. To create your first workflow, follow our quickstart guide.

The Inbox Component

​
Next Steps

Customize the inbox

Learn how to customize the inbox with your own branding and design.

Learn the components

Learn more about the composable components of the inbox.

​
Frequently Asked Questions