How to send email notifications when comments are created
Liveblocks allows you to build a commenting experience with Comments. Using our webhooks and REST API, it’s possible to send email notifications to users when they’re mentioned in comments.
In this guide we’ll be learning how to send comments notifications, and more specifically, we’ll be looking at how to:
- Trigger events when comments are created using the CommentCreated webhook event.
- Fetch a comment’s data using the @liveblocks/node package.
- Create notifications containing the comment’s formatted text.
- Send an email notification with Resend.
When a webhook event is triggered, it can send a POST request to the back end in your project, and from within there we can update the database. In this guide, we’ll be using a Next.js route handler (API endpoint) as an example, but other frameworks work similarly.
In order to use webhooks, we’ll need to retrieve the
the request. Here’s the basic endpoint we’ll be starting from:
Create this endpoint in your project, and make it available on
the following URL:
If your project is running on
localhost:3000, you can run the following
command to generate a temporary URL that’s available while your localhost server
If you correctly input your IP address, the URL
localtunnel generates can be
placed into the Liveblocks webhooks dashboard for quick testing.
To use webhooks, you need to pass your endpoint URL to the webhooks dashboard inside your Liveblocks project, and tell the webhook to trigger when a comment has been created.
Webhooks dashboard is set up!
Note that you can filter specifically for
commentCreatedevents, but we’re ignoring this for now so we can test more easily. Let’s go back to the code.
@liveblocks/node package provides
you with a function that verifies whether the current request is a real webhook
request from Liveblocks. You can set this up by setting up a
Make sure to add your “Signing Secret” from the Liveblocks dashboard—in a real project we’d recommend using an environment variable for this.
We can then check we’re receiving the correct type of event, get the data from the webhook, and handle sending the notification inside there.
We now have the
commentId of the created comment,
along with some
The next step is to use the
Liveblocks client from
@liveblocks/node to retrieve the entire comment’s data, along with the thread
participants. In Liveblocks Comments, a participant refers to a user that has
commented or been mentioned in a thread—we’ll be sending a notification to each
of these users.
Now that we have the comment data and a list of participants, we have one more
step before sending the notifications—formatting the comment’s text, found
comment.body. Let’s take a look at how it works for an example comment,
As you can see on line 6, we’re converting the body into a plain string, which means we lose the formatting. We’re also seeing the user’s ID, instead of the name—this is because we need to provide the user’s information, as the comment only stores the user’s ID.
By providing two options, we can transform the comment into HTML, keeping the formatting, and add the user information.
On line 18, you can now see that we’re creating an HTML string, and using the
mentioned user’s name. Note that you can also easily transform your comment into
Markdown, or a completely custom format, learn more under
Let’s use this HTML formatting function in our endpoint, getting user information from your database.
Now that the comment’s body is in our preferred format, we can send the
notifications. Earlier we retrieved
participants, a list of
have been mentioned in the thread. You most likely have user information in your
database, which you can retrieve from these
After getting each user’s email, simply loop through and send the formatted comment.
Resend is a great tool for easily sending emails, and in this code example, we’re using it to send the notifications to each user. Make sure to add your API key from the Resend dashboard before running the code.
Great, we’re successfully sending email notifications after new comments are created! In this guide we’ve learned: