---
title: Overview
description: Display notifications directly within your application
---

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

1. Navigate to **Channels** in your project
2. Click **Create Channel**
3. Select **In-App** as the channel type
4. Select **Notiflows In-App** as the provider
5. Optionally set a retention period
6. Save the channel

## Client Integration

### React SDK

Install the React SDK for pre-built components:

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

```tsx
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](/docs/sdks/client-side/react) for full component reference.

### JavaScript SDK

For custom UI implementations:

```bash
npm install @notiflows/client
```

```typescript
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](/docs/sdks/client-side/javascript) 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:

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