Your end users can now individually configure which notifications should be sent outside your application, and on which channel, for example via email, Slack, Microsoft Teams, and Web Push.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
With Liveblocks Notifications, you can already create an in-app notifications inbox inside your product. When users miss any in-app notifications, Liveblocks enables sending notifications on alternate channels, such as email, Slack, Microsoft Teams, Web Push.
Today, we’re introducing new configuration options that enable building notification settings panels, allowing each of your end users to individually choose which channels they should receive notifications on. With our latest update, it’s just a couple of lines of code to get started.
To add an inbox to your app, create a Liveblocks account and get started for free.
With this new update, you’ll be able to create a user notifications panel in your application. Users will be able to choose which notifications to receive, and on which channel—for example, one user may wish to receive new comment notifications via email, but not via Slack.
Each option is individually customizable for each user on your app, and their settings are saved under their user ID.
If you’d like to get started, I’d recommend reading our guide on how to create a notification settings panel. In this guide we take you through every step required to set it up. If you’d just like a quick overview, keep reading this article.
User notifications settings are powered by our
notification webhook, which
triggers events in your back end when users have unread notifications. Each
channel triggers separate webhook events, meaning you can handle each one
separately. Here’s an example of a thread webhook event on the email
channel.
This is a thread notification, meaning the user has an unread comment. Because
it was received on the email channel, it means you can create an email for the
userId mentioned in the event, letting them know they have an unread comment.
We have guides on how to set up webhooks and emails for unread comments in threads and for unread mentions in text editors.
We have a new dashboard page, and you must enable each kind of notification on
here before you receive any events. You can set this up on four different
channels, Email, Slack, Microsoft Teams, and Web Push. On each channel you can
enable thread kinds, textMention kinds, and any custom notification kinds
too.
Above we’re enabling thread notifications on the Email channel. Note that we
don’t recommend toggling these options in a production project before
checking your project is ready to handle it.
If you’re interested in more channels, feel free to reach out to us on Discord, as we’d love your feedback.
Once you have the webhooks and the dashboard set up, you can build the
interface. We’ve created new React hooks that enable this. For example, adding a
checkbox to toggle thread notifications via email looks like this:
Each user’s individual settings are automatically saved, and updates are applied
optimistically, meaning your UI responds immediately. With
useNotificationSettings,
you can put together a settings panel that looks similar to the image further up
the page.
If you’re starting from scratch, we recommend following our guide detailing how to create a notification settings panel, which will guide you through every step.
On top of this, we’ve also released additional methods for Node.js and JavaScript, plus new REST APIs.
We’ve added a new example to our gallery which shows you how to set up a notifications panel. In this example, you can sign in as different users, and edit their individual settings. We’ve also updated our Next.js Starter Kit, adding a new dialog menu for changing notification settings.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.15 or below, make sure to follow our upgrade guides before updating.
We have some new guides that take you through how to get started.
Plus we have our new API reference sections for each method.
Contributors include:
7 authors
