Inbox

Prerequisites

Before using the AppSloth Inbox component, make sure you’ve:

Set up AppSloth in your project
Installed the required shadcn/ui components:

npx shadcn-ui@latest add button dropdown-menu badge input tabs

Adding the Inbox Component

The AppSloth Inbox component provides a customizable notification center for your application. It includes features like real-time notifications, tabbed interface for new and archived notifications, search functionality, and customizable styling. Adding the Inbox component to your application is straightforward:

// app/layout.js or app/layout.tsx
import { AppSlothProvider } from 'appsloth/provider';
import { Inbox } from 'appsloth/inbox';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AppSlothProvider 
          userEmail="[email protected]"
          customerId="project-123"
        >
          <main className="flex w-full flex-col">
            <Inbox />
            {children}
          </main>
        </AppSlothProvider>
      </body>
    </html>
  );
}

// pages/_app.js or pages/_app.tsx
import { AppSlothProvider } from "appsloth/provider";
import { Inbox } from "appsloth/inbox";

function MyApp({ Component, pageProps }) {
  return (
    <AppSlothProvider userEmail="[email protected]" customerId="project-123">
      <main className="flex w-full flex-col">
        <Inbox />
        <Component {...pageProps} />
      </main>
    </AppSlothProvider>
  );
}

export default MyApp;

// src/App.jsx or src/App.tsx
import { AppSlothProvider } from "appsloth/provider";
import { Inbox } from "appsloth/inbox";

function App() {
  return (
    <AppSlothProvider userEmail="[email protected]" customerId="project-123">
      <main className="flex w-full flex-col">
        <Inbox />
        <YourApp />
      </main>
    </AppSlothProvider>
  );
}

export default App;

Position your Inbox component where it’s easily accessible to users. Common placements include the navigation bar or header area, typically aligned to the right side.

How It Works

The Inbox component provides a comprehensive notification system:

Real-time Updates: Automatically polls for new notifications
Tabbed Interface: Separate tabs for new and archived notifications
Search Functionality: Search through archived notifications
Unread Badges: Visual indicator for unread notifications
Customizable UI: Extensive styling and configuration options
Timestamp Display: Configurable timestamp formatting

import { Inbox } from 'appsloth/inbox';

// Basic implementation
<Inbox />

// Customized implementation
<Inbox
  menuWidth={400}
  maxHeight={400}
  showSearch={true}
  showTimestamps={true}
  timestampFormat="relative"
  pollingInterval={60000}
/>

Customization Options

The Inbox component is highly customizable through props:

Button and Badge Customization

Customize the trigger button and unread badge:

import { Bell } from "lucide-react";

<Inbox
  triggerButton={{
    icon: <Bell className="h-5 w-5" />,
    variant: "ghost",
    size: "icon",
    className: "my-custom-class",
  }}
  unreadBadge={{
    variant: "destructive",
    position: { top: "-1px", right: "-1px" },
    className: "badge-custom",
  }}
/>;

Tab Customization

Customize the tabs for new and archived notifications:

<Inbox
  newTab={{
    label: "Unread",
    className: "custom-tab",
  }}
  archiveTab={{
    label: "History",
    className: "custom-tab",
  }}
  dropdownClassName="custom-dropdown"
/>

Search and Empty States

Configure search behavior and empty state messages:

<Inbox
  showSearch={true}
  searchPlaceholder="Search notifications..."
  emptyNewMessage="No new notifications"
  emptyArchivedMessage="No archived notifications"
  emptySearchMessage="No matching notifications"
/>

Custom Notification Rendering

Provide custom rendering for notification items:

<Inbox
  renderNotificationItem={(notification) => (
    <div className="custom-notification">
      <h4>{notification.title}</h4>
      <p>{notification.description}</p>
      <span>{notification.createdAt}</span>
    </div>
  )}
  onNotificationClick={(notification) => {
    console.log("Clicked:", notification);
  }}
/>

Component Props

Prop	Type	Default	Description
`triggerButton`	`ButtonConfig`	`{ icon: <Bell />, variant: "ghost", size: "icon" }`	Configuration for the trigger button
`unreadBadge`	`BadgeConfig`	`{ variant: "destructive", position: { top: "-1px", right: "-1px" } }`	Configuration for the unread count badge
`newTab`	`TabConfig`	`{ label: "New" }`	Configuration for the new notifications tab
`archiveTab`	`TabConfig`	`{ label: "Archive" }`	Configuration for the archived notifications tab
`menuWidth`	`number`	400	Width of the dropdown menu in pixels
`maxHeight`	`number`	400	Maximum height of the notification list
`showSearch`	`boolean`	true	Whether to show the search input in archive
`searchPlaceholder`	`string`	”Search archived notifications…”	Placeholder text for search input
`markAllAsReadText`	`string`	”Mark all as read”	Text for the mark all as read button
`emptyNewMessage`	`string`	”No new notifications”	Message shown when no new notifications
`emptyArchivedMessage`	`string`	”No archived notifications”	Message shown when no archived notifications
`emptySearchMessage`	`string`	”No matching notifications”	Message shown when search has no results
`pollingInterval`	`number`	60000	Interval for checking new notifications (ms)
`notificationItemClassName`	`string`	""	Additional classes for notification items
`showTimestamps`	`boolean`	true	Whether to show timestamps
`timestampFormat`	`"relative" \| "absolute"`	”relative”	Format for displaying timestamps
`renderNotificationItem`	`(notification: Notification) => React.ReactNode`	undefined	Custom renderer for notifications
`onNotificationClick`	`(notification: Notification) => void`	undefined	Callback when notification is clicked
`dropdownClassName`	`string`	""	Additional classes for dropdown content

Viewing Notifications in the Dashboard

All notifications can be managed and analyzed in your AppSloth Dashboard:

Log into your AppSloth Dashboard
Navigate to the “Notifications” section
Manage your notifications:
- Create new notifications
- View delivery statistics
- Analyze engagement metrics
- Configure notification rules

Next Steps

Now that you’ve added AppSloth Inbox to your application, explore more features:

Banners

Create eye-catching banners to highlight important announcements

Feedback

Collect and manage user feedback to improve your product

Retention Modal

Collect feedback and present salvage offers when users try to cancel

Get Started

Features

Prerequisites

Adding the Inbox Component

How It Works

Customization Options

Button and Badge Customization

Tab Customization

Search and Empty States

Custom Notification Rendering

Component Props

Viewing Notifications in the Dashboard

Next Steps

Banners

Feedback

Retention Modal

​Prerequisites

​Adding the Inbox Component

​How It Works

​Customization Options

​Button and Badge Customization

​Tab Customization

​Search and Empty States

​Custom Notification Rendering

​Component Props

​Viewing Notifications in the Dashboard

​Next Steps

Banners

Feedback

Retention Modal

Prerequisites

Adding the Inbox Component

How It Works

Customization Options

Button and Badge Customization

Tab Customization

Search and Empty States

Custom Notification Rendering

Component Props

Viewing Notifications in the Dashboard

Next Steps