Skip to content

Commit

Permalink
Update notifications.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
haydenbleasel committed Jan 12, 2025
1 parent 6d637bf commit 2e9c0d5
Showing 1 changed file with 20 additions and 17 deletions.
37 changes: 20 additions & 17 deletions docs/packages/notifications.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Notifications
description: Provides a notifications provider and components for the app.
description: In-app notifications for your users.
---

import { Authors } from '/snippets/authors.mdx';
Expand All @@ -25,31 +25,35 @@ import { Authors } from '/snippets/authors.mdx';
},
}]} />

next-forge supports sending in-app notifications to your users using [Knock](https://knock.app/). Knock is a cross-channel notification platform that supports in-app, email, SMS, push, and chat notifications.
next-forge offers a notifications package that allows you to send in-app notifications to your users. By default, it uses [Knock](https://knock.app/), a cross-channel notification platform that supports in-app, email, SMS, push, and chat notifications. Knock allows you to centralize your notification logic and templates in one place and [orchestrate complex workflows](https://docs.knock.app/designing-workflows/overview) with things like branching, batching, throttling, delays, and conditional sending.

## Setup

## How it works
To use the notifications package, you need to add the required environment variables to your project, as specified in the `packages/notifications/keys.ts` file.

Knock allows you to centralize your notification logic and templates in one place and [orchestrate complex workflows](https://docs.knock.app/designing-workflows/overview) with things like branching, batching, throttling, delays, and conditional sending. To use Knock with next-forge, you need to provide values for the [`KNOCK_API_KEY`,`KNOCK_SECRET_API_KEY`](https://docs.knock.app/developer-tools/api-keys), and `KNOCK_FEED_CHANNEL_ID` environment variables.
## In-app notifications feed

## Usage
To render an in-app notifications feed, import the `NotificationsTrigger` component from the `@repo/notifications` package and use it in your app. We've already added this to the sidebar in the example app:

### Render an in-app feed
To render an in-app feed, import the `Feed` component from the `@repo/notifications` package and use it in your app:
```tsx apps/app/app/(authenticated)/components/sidebar.tsx
import { NotificationsTrigger } from '@repo/notifications/components/trigger';


```tsx
import { Feed } from '@repo/notifications/feed';

<Feed/>
<NotificationsTrigger>
<Button variant="ghost" size="icon" className="shrink-0">
<BellIcon size={16} className="text-muted-foreground" />
</Button>
</NotificationsTrigger>
```

### Send a notification
Pressing the button will open the in-app notifications feed, which displays all of the notifications for the current user.

## Send a notification

Knock sends notifications using workflows. To send an in-app notification, create a new [workflow](https://docs.knock.app/concepts/workflows) in the Knock dashboard that uses the [`in-app` channel provider](https://docs.knock.app/integrations/in-app/knock) and create a corresponding message template.

Then you can [trigger that workflow](https://docs.knock.app/send-notifications/triggering-workflows) for a particular user in your app, passing in the necessary data to populate the message template:
```tsx

```tsx notify.ts
import { notifications } from '@repo/notifications';

await notifications.workflows.trigger('workflow-key', {
Expand All @@ -63,7 +67,6 @@ await notifications.workflows.trigger('workflow-key', {
});
```

### Creating multi-channel notifications
Using Knock, you can add additional channel providers to your workflow to send notifications via email, SMS, push, or chat. To do this, create a new [channel provider](https://docs.knock.app/integrations) in the Knock dashboard, follow any configuration instructions for that provider, and add it to your workflow as a channel step.

## Multi-channel notifications

Using Knock, you can add additional channel providers to your workflow to send notifications via email, SMS, push, or chat. To do this, create a new [channel provider](https://docs.knock.app/integrations) in the Knock dashboard, follow any configuration instructions for that provider, and add it to your workflow as a channel step.

0 comments on commit 2e9c0d5

Please sign in to comment.