In-app notifications are messages displayed directly within your application's UI using the Notiflows client SDKs.

Configuration

To create an in-app channel, configure the following:

Field	Required	Description
Retention Period	No	Number of days to retain notifications

Setup in Notiflows

Navigate to Channels in your project
Click Create Channel
Select In-App as the channel type
Select Notiflows In-App as the provider
Optionally set a retention period
Save the channel

Client Integration

React SDK

Install the React SDK for pre-built components:

npm install @notiflows/react

import {
  NotiflowsProvider,
  FeedRoot,
  FeedTrigger,
  FeedContent,
  FeedPanel,
} from '@notiflows/react';

function App() {
  return (
    <NotiflowsProvider
      apiKey="your-public-api-key"
      userKey="user-key-from-backend"
      userId="user_123"
      channelId="your-in-app-channel-id"
    >
      <FeedRoot>
        <FeedTrigger />
        <FeedContent>
          <FeedPanel />
        </FeedContent>
      </FeedRoot>
    </NotiflowsProvider>
  );
}

See the React SDK documentation for full component reference.

JavaScript SDK

For custom UI implementations:

npm install @notiflows/client

import { Notiflows } from '@notiflows/client';

const client = new Notiflows({
  apiKey: 'your-public-api-key',
  userKey: 'user-key-from-backend',
  userId: 'user_123',
});

const feed = client.feed({ channelId: 'your-in-app-channel-id' });

// Fetch notifications
const { items, page } = await feed.getEntries();

// Subscribe to real-time updates
feed.subscribeToRealtimeNotifications();
feed.onDelivery((entry) => {
  console.log('New notification:', entry);
});

See the JavaScript SDK documentation for full API reference.

Templates

In-app templates use markdown and include:

Body - The notification message (supports Markdown)
Action URL - URL to navigate when clicked

Use Liquid templating for dynamic content:

{{ actor.first_name }} commented on your post: "{{ data.comment_preview }}"

Available variable contexts:

recipient.* - Recipient user data (first_name, last_name, email, etc.)
actor.* - User who triggered the notification
data.* - Custom payload passed when triggering the notiflow

In-App Notifications