Co-authored by
Zopio Labszopio
Jeff EverhartKnock
zopio offers a notifications package that allows you to send in-app notifications to your users. By default, it uses Knock, 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 with things like branching, batching, throttling, delays, and conditional sending.

​
Setup

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.

​
In-app notifications feed

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:
apps/app/app/(authenticated)/components/sidebar.tsx
import { NotificationsTrigger } from '@repo/notifications/components/trigger';

<NotificationsTrigger>
  <Button variant="ghost" size="icon" className="shrink-0">
    <BellIcon size={16} className="text-muted-foreground" />
  </Button>
</NotificationsTrigger>
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 in the Knock dashboard that uses the in-app channel provider and create a corresponding message template. Then you can trigger that workflow for a particular user in your app, passing in the necessary data to populate the message template:
notify.ts
import { notifications } from '@repo/notifications';

await notifications.workflows.trigger('workflow-key', {
  recipients: [{
    id: 'user-id',
    email: 'user-email',
  }],
  data: {
    message: 'Hello, world!',
  },
});

​
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 in the Knock dashboard, follow any configuration instructions for that provider, and add it to your workflow as a channel step.