Notiflows In-App

The Notiflows In-App channel provides a real-time, interactive notification center that integrates directly into your application. Unlike other channels, this is a built-in feature that doesn't require external provider configuration.

What is the In-App Channel?

The In-App channel delivers notifications directly within your application's interface. These notifications appear in a dedicated notification center, feed, or as toast messages, keeping users informed without leaving your app.

Key Features

Real-Time Delivery

Notifications are delivered instantly through a real-time connection. Users see new notifications the moment they're triggered, without needing to refresh the page.

Pre-Built UI Components

Notiflows provides ready-to-use UI components that you can drop into your application:

Notification Feed: A scrollable list of all notifications
Notification Inbox: A full-featured inbox with tabs, filters, and actions
Toast Notifications: Temporary pop-up notifications for immediate attention
Badge Counts: Unread notification counters for navigation elements

Headless API

For complete customization, use our headless API to build your own notification UI. Fetch notifications, manage read states, and handle user interactions with full control over the presentation.

Message Status Management

Each in-app notification has a status that tracks user interaction:

Unseen: The notification has been delivered but not yet viewed
Seen: The notification has appeared in the user's view
Read: The user has explicitly marked the notification as read or clicked on it

These statuses enable features like unread counters, filtering, and mark-all-as-read functionality.

Archiving

Users can archive notifications to remove them from their active feed while preserving them for later reference. This keeps the notification center clean and focused on relevant items.

Multi-Device Sync

Notification status and actions sync across all devices. If a user reads a notification on their phone, it appears as read on their desktop too.

Setting Up the In-App Channel

Since the In-App channel is built into Notiflows, setup is straightforward:

Create an In-App Channel: In your Notiflows dashboard, add an In-App channel
Configure Your Notiflow: Add an In-App step to your notiflow to send notifications through this channel
Integrate the UI: Add the Notiflows UI components to your application

Integrating the Notification Inbox

To add a notification inbox to your React application:

Prerequisites

A Notiflows public API key
An In-App channel configured in your dashboard
A notiflow that sends In-App notifications

Installation

npm install @notiflows/react

Basic Implementation

import { NotiflowsProvider, NotificationInbox } from '@notiflows/react';

function App() {
  return (
    <NotiflowsProvider 
      apiKey="your-public-api-key"
      userId="current-user-id"
    >
      <NotificationInbox />
    </NotiflowsProvider>
  );
}

The NotiflowsProvider handles authentication and real-time connections, while NotificationInbox renders the notification UI.

Customization Options

Theming

Customize colors, fonts, and spacing to match your application's design:

<NotificationInbox 
  theme={{
    primaryColor: '#3B82F6',
    backgroundColor: '#FFFFFF',
    textColor: '#1F2937',
  }}
/>

Custom Rendering

For complete control, use the headless hooks to build custom UIs:

import { useNotifications } from '@notiflows/react';

function CustomInbox() {
  const { notifications, markAsRead, markAllAsRead } = useNotifications();
  
  return (
    <div>
      {notifications.map(notification => (
        <div key={notification.id} onClick={() => markAsRead(notification.id)}>
          {notification.content}
        </div>
      ))}
    </div>
  );
}

Notification Content

In-App notifications support rich content:

Body: Notification text with Markdown support
Avatar: Actor image derived from user data
Action Types: Three interaction modes:
- Default: The entire notification is a clickable link
- Single Action: A single action button with a custom label and URL
- Multi Action: Two buttons (primary and secondary) each with their own label and URL
Custom Data: Additional metadata passed via Liquid template variables

User Preferences

Users can manage their In-App notification preferences:

Enable or disable specific notification types
Control which notiflows send in-app notifications

Best Practices

Keep Notifications Relevant

Only send In-App notifications for information users actually need. Over-notification leads to users ignoring the notification center entirely.

Use Clear, Actionable Content

Write notification text that tells users what happened and what they can do about it. Include action buttons when appropriate.

Respect User Attention

Use toasts sparingly for truly time-sensitive information. Most notifications should appear in the feed without interrupting the user.

Design for Skimming

Users often scan their notification feed quickly. Use clear titles and concise descriptions that communicate value at a glance.

Test the Experience

Verify how notifications appear on different screen sizes and in different application states.

The In-App channel provides a powerful way to keep users engaged within your application while respecting their attention and preferences.

Notiflows In-App

On this page