Skip to main content

Notifications

Keep your users informed and engaged.

Overview​

LibreApps Desktop includes a centralized notification system that allows you to send real-time alerts and updates to your users. Whether it's a new message, a system alert, or a task assignment, the notification system ensures that users never miss important information.

Key Features​

  • Real-time Alerts: Deliver notifications instantly using WebSockets or Server-Sent Events (SSE).
  • In-app Notification Center: A dedicated area in the Navbar for users to view and manage their notifications.
  • Toast Notifications: Brief, non-intrusive messages that appear at the corner of the screen.
  • Email Notifications: Automatically send email alerts for critical events.
  • Notification Preferences: Allow users to choose which types of notifications they want to receive and how.

How it Works​

  1. Event Trigger: An event occurs in the backend (e.g., a new order is placed).
  2. Notification Creation: The backend creates a notification record in the database.
  3. Delivery:
    • In-app: The backend pushes the notification to the user's browser via a WebSocket connection.
    • Email: The backend sends an email using a service like SendGrid or AWS SES.
  4. User Interaction: The user sees the notification and can click on it to take action or mark it as read.

Implementation in LibreApps Desktop​

LibreApps Desktop provides a simple hook for sending toast notifications from the frontend:

import { useToast } from '@/components/ui/use-toast';

export function MyComponent() {
  const { toast } = useToast();

  const handleClick = () => {
    toast({
      title: "Success!",
      description: "Your changes have been saved.",
    });
  };

  return <button onClick={handleClick}>Save Changes</button>;
}

Best Practices​

  • ✅ Do this: Use notifications sparingly to avoid overwhelming users.
  • ✅ Do this: Provide clear and actionable information in every notification.
  • ❌ Don't do this: Send sensitive information in notifications; use them to alert the user to check the dashboard instead.