In-App Channel

In-App Notifications

In-app notifications appear directly within your application, providing real-time updates without requiring users to check email or other external channels. MagicBell's in-app notification system combines a notification feed, preferences UI, and real-time delivery to create a complete notification experience.

Key Components

In-app notifications consist of three main elements:

Notification Inbox

The inbox displays a chronological list of notifications for the current user. It supports read/unread states, pagination, and real-time updates. Users can view, mark as read, archive, and delete notifications directly from the inbox.

Key features:

  • Real-time notification delivery
  • Read/unread state management
  • Infinite scroll pagination
  • Customizable notification rendering
  • Filtering and categorization
  • Archive and delete actions

Notification Preferences

The preferences UI allows users to control how and when they receive notifications. Users can configure their preferences by channel (email, mobile push, SMS, etc.) and by notification category.

Features include:

  • Per-channel notification preferences
  • Category-based subscription management
  • Granular control over notification types
  • User-friendly preference interface

Real-Time Updates

MagicBell maintains a persistent connection to deliver notifications in real-time. When a new notification is created, it appears instantly in the user's inbox without requiring a page refresh.

Implementation

MagicBell provides ready-to-use UI components for all major frameworks:

React Components

The React SDK offers several components for building in-app notifications:

  • FloatingInbox: A floating notification panel that toggles from a bell icon, ideal for navigation bars
  • Inbox: A standalone inbox component for embedding directly in your page
  • ContextProvider: Manages authentication and shared state across components

View React Components

Svelte Components

Pre-built Svelte components for notifications, including inbox and floating inbox variations.

View Svelte Components

Preact Components

Lightweight Preact components for in-app notifications.

View Preact Components

Best Practices

  1. Position strategically: Place the notification bell in a consistent, easily accessible location like your navigation bar
  2. Show unread counts: Display the number of unread notifications on the bell icon to encourage engagement
  3. Enable real-time updates: Use the real-time connection to deliver notifications instantly
  4. Respect user preferences: Allow users to customize their notification settings
  5. Keep notifications relevant: Send targeted notifications based on user actions and interests
  6. Provide clear actions: Include actionable links in notifications to guide users to relevant content
  7. Handle offline gracefully: Queue notifications when users are offline and sync when they reconnect

Use Cases

In-app notifications are ideal for:

  • Activity updates: Comments, mentions, likes, and reactions
  • System alerts: Account updates, security notifications, billing reminders
  • Collaboration: Task assignments, project updates, team mentions
  • Content updates: New messages, document changes, approval requests
  • Transactional events: Order confirmations, payment receipts, status changes
  • Social interactions: Friend requests, group invitations, event reminders