Skip to main content

​
Prerequisites

Before using the AppSloth Inbox component, make sure you’ve:
  1. Set up AppSloth in your project
  2. 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>
  );
}
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:
  1. Real-time Updates: Automatically polls for new notifications
  2. Tabbed Interface: Separate tabs for new and archived notifications
  3. Search Functionality: Search through archived notifications
  4. Unread Badges: Visual indicator for unread notifications
  5. Customizable UI: Extensive styling and configuration options
  6. 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

PropTypeDefaultDescription
triggerButtonButtonConfig{ icon: <Bell />, variant: "ghost", size: "icon" }Configuration for the trigger button
unreadBadgeBadgeConfig{ variant: "destructive", position: { top: "-1px", right: "-1px" } }Configuration for the unread count badge
newTabTabConfig{ label: "New" }Configuration for the new notifications tab
archiveTabTabConfig{ label: "Archive" }Configuration for the archived notifications tab
menuWidthnumber400Width of the dropdown menu in pixels
maxHeightnumber400Maximum height of the notification list
showSearchbooleantrueWhether to show the search input in archive
searchPlaceholderstring”Search archived notifications…”Placeholder text for search input
markAllAsReadTextstring”Mark all as read”Text for the mark all as read button
emptyNewMessagestring”No new notifications”Message shown when no new notifications
emptyArchivedMessagestring”No archived notifications”Message shown when no archived notifications
emptySearchMessagestring”No matching notifications”Message shown when search has no results
pollingIntervalnumber60000Interval for checking new notifications (ms)
notificationItemClassNamestring""Additional classes for notification items
showTimestampsbooleantrueWhether to show timestamps
timestampFormat"relative" | "absolute"”relative”Format for displaying timestamps
renderNotificationItem(notification: Notification) => React.ReactNodeundefinedCustom renderer for notifications
onNotificationClick(notification: Notification) => voidundefinedCallback when notification is clicked
dropdownClassNamestring""Additional classes for dropdown content

​
Viewing Notifications in the Dashboard

All notifications can be managed and analyzed in your AppSloth Dashboard:
  1. Log into your AppSloth Dashboard
  2. Navigate to the “Notifications” section
  3. Manage your notifications:
    • Create new notifications
    • View delivery statistics
    • Analyze engagement metrics
    • Configure notification rules
AppSloth Notifications Dashboard

​
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