In-App Notifications

TL;DR — Install @enbbox/react, add the <Inbox /> component with your project ID and subscriber ID, create an In-App workflow in the dashboard, and trigger notifications via the API. Total setup: under 5 minutes.

Add a real-time notification inbox to your application with the Enbbox Inbox component.

Install the SDK

npm install @enbbox/react

Add the Inbox Component

"use client";

import { Inbox } from "@enbbox/react";

export function NotificationCenter() {
  return (
    <Inbox
      projectId={process.env.NEXT_PUBLIC_ENBBOX_PROJECT_ID!}
      subscriberId={currentUser.id}
    />
  );
}

Inbox Component Features

Create an In-App Workflow

In the dashboard, create a workflow with an In-App step:

1. Go to Workflows → New Workflow
2. Add an In-App step
3. Configure subject, body, and action buttons
4. Save and activate

Trigger Notifications

await enbbox.trigger("new-message", {
  to: { subscriberId: recipientId },
  actor: { subscriberId: senderId },
  payload: {
    message: "Hey, check this out!",
    conversationId: "123",
  },
});

Customization

See Inbox Overview for full customization options including theming, custom bell icons, and event handling.

Next Steps

• Push Notifications — Add mobile push to your workflow
• Email Notifications — Configure email delivery
• Digest Notifications — Batch notifications for better UX