Configure each user’s notification settings for email, Slack, and more

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.

What does it enable?

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.

Get started

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.

How does it work?

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.

{  "type": "notification",  "data": {    "channel": "email",    "kind": "thread",    "projectId": "my-project-id",    "roomId": "my-room-id",    "userId": "my-user-id",    "threadId": "my-thread-id",    "inboxNotificationId": "my-inbox-notification-id",    "createdAt": "2021-10-06T01:45:56.558Z"  }}

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.

Enabling notifications on the dashboard

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.

Building the interface

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:

import { useNotificationSettings } from "@liveblocks/react";
function NotificationSettings() {  const [{ isLoading, error, settings }, updateSettings] =    useNotificationSettings();
  if (isLoading || error || !settings.email) {    return null;  }
  return (    <label>      Receive thread notifications by email      <input        type="checkbox"        checked={settings.email.thread}        onChange={(e) =>          updateSettings({ email: { thread: e.target.checked } })        }      />    </label>  );}

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.

Additional methods

On top of this, we’ve also released additional methods for Node.js and JavaScript, plus new REST APIs.

Example updates

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.

Upgrade

To use the latest features, update your packages with the following command.

$npx create-liveblocks-app@latest --upgrade

If you were previously on Liveblocks 2.15 or below, make sure to follow our upgrade guides before updating.

Get started now

We have some new guides that take you through how to get started.

• How to create a notification settings panel.
• What to check before enabling a new notification kind.

Plus we have our new API reference sections for each method.

• useNotificationSettings
• client.getNotificationSettings
• Liveblocks.getNotificationSettings

Contributors

Contributors include:

7 authors