Overview

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 support three action types for controlling how users interact with notifications.

Action Types

Type	Value	Description
Default	`default`	The entire notification is clickable. Navigates to the action URL when clicked.
Single Action	`single`	Displays a single action button with a custom label.
Multi Action	`multi`	Displays two action buttons — a primary and a secondary — each with its own label and URL.

Template Fields

Field	Action Type	Description
Body	All	The notification message (supports Markdown)
Action Type	All	One of `default`, `single`, or `multi`
Action URL	`default`	URL to navigate when the notification is clicked
Primary Action	`single`, `multi`	Object with `label` and `url` for the primary button
Secondary Action	`multi`	Object with `label` and `url` for the secondary button

All action fields are optional. A notification without any action configured will render as static content with no clickable behavior.

Liquid Templating

Use Liquid syntax for dynamic content in any text field, including action URLs and button labels:

{{ 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

On this page