Inbox Overview

The Inbox is a pre-built, customizable notification component that you can embed in your web application. It provides a real-time notification feed with read/unread tracking, action buttons, and preference management.

Features

• Real-time updates — Notifications appear instantly via SSE
• Read/unread tracking — Visual indicators for notification status
• Action buttons — Primary and secondary call-to-action buttons
• Preferences — Built-in subscriber preference management
• Theming — Fully customizable appearance
• Responsive — Works on desktop and mobile
• Accessible — Follows WAI-ARIA accessibility guidelines

Quick Start

npm install @enbbox/react

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

function App() {
  return <Inbox projectId="YOUR_PROJECT_ID" subscriberId="user-123" />;
}

Components

The Inbox library provides several components:

Customization

Custom Bell Icon

<Inbox
  projectId="YOUR_PROJECT_ID"
  subscriberId="user-123"
  renderBell={(unreadCount) => (
    <button>🔔 {unreadCount > 0 && <span>{unreadCount}</span>}</button>
  )}
/>

Custom Notification Renderer

<Inbox
  projectId="YOUR_PROJECT_ID"
  subscriberId="user-123"
  renderNotification={(notification) => (
    <div>
      <strong>{notification.subject}</strong>
      <p>{notification.body}</p>
    </div>
  )}
/>

Show/Hide Preferences

<Inbox
  projectId="YOUR_PROJECT_ID"
  subscriberId="user-123"
  showPreferences={false}
/>

Next Steps

• React Integration — Detailed React setup guide
• SDKs — Other framework integrations