---
title: Notiflows In-App
description: Built-in in-app notification center
---

## 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:

1. **Create an In-App Channel**: In your Notiflows dashboard, add an In-App channel
2. **Configure Your Notiflow**: Add an In-App step to your notiflow to send notifications through this channel
3. **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**

```bash
npm install @notiflows/react
```

**Basic Implementation**

```jsx
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:

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

**Custom Rendering**

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

```jsx
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.