Sending email notifications is an important way to keep users engaged in your
application, but making them timely, personalized, and visually appealing can
often be a challenge. This is why we’ve created a simpler way for you to
implement emails with Liveblocks, making it easier than ever to create email
templates that let users know if they’ve missed a comment or mention in your
app.

Liveblocks automatically keeps track of each user’s unread comments & mentions,
and our new package features different ways to email users and share this
content. We’ve also created new templates to get you started.

- [Comment thread notifications](#comment-thread-notifications) - Email relevant
  users about unread comments.
- [Text editor mentions](#text-editor-notifications) - Email users about unread
  mentions in Tiptap or Lexical.
- [Ready-made email templates](#ready-made-email-templates) - Styled React Email
  components you can use.

## Email notifications for unread comments [#comment-thread-notifications]

When using [Liveblocks Comments](/comments), thread notifications start when a
user is participating or mentioned in a thread. After a certain period of time,
if the user still hasn’t opened the application and seen the new comments, the
notification event is triggered. This is the ideal time to send an email to the
user, letting them know they’ve missed something.

Our new package makes it easier than ever to create these emails by formatting
comment bodies for you, letting you insert user data such as usernames, and
returning data that can be used in React or HTML email templates.

<div className="my-8 md:my-10">
  <Figure>
    <Image
      src="/images/blog/email-templates-release/new-comments-email.jpg"
      alt="New comments email"
      width={672}
      height={388}
      quality={95}
    />
  </Figure>
  <div className="markdown text-center text-xs! text-marketing-subtler *:mt-2! lg:text-sm!">
    Template in [Next.js Comments Emails
    example](/examples/comments-emails/nextjs-comments-emails-resend).
  </div>
</div>

To create the email template in the screenshot, our new function called
[`prepareThreadNotificationEmailAsReact`](/docs/api-reference/liveblocks-emails#prepare-thread-notification-email-as-react)
can be used to put it together in JSX.

```tsx
const data = await prepareThreadNotificationEmailAsReact(/* ... */);

const email = (
  <div>
    <div>
      {data.comments.length} new comments in {data.roomInfo.name}
    </div>

    {data.comments.map((comment) => (
      <div key={comment.id}>
        <img src={comment.author.info.avatar} />
        <div>
          {comment.author.info.name} {comment.createdAt}
        </div>
        <div>{comment.reactBody}</div>

        <a href={data.roomInfo.url}>View Comment</a>
      </div>
    ))}
  </div>
);
```

We also provide a similar function for
[creating emails with HTML](/docs/api-reference/liveblocks-emails#prepare-thread-notification-email-as-html).

### Get started with unread comments email notifications

To use our new package with Liveblocks Comments, you need to set up webhooks in
your app. We have a full guide that explains how to implement every step:

- [How to send email notifications of unread comments](/docs/guides/how-to-send-email-notifications-of-unread-comments).

## Email notifications for text editor mentions [#text-editor-notifications]

Text editor notifications are triggered when a user is mentioned in a
[Liveblocks Text Editor](/text-editor). Similarly to thread notifications, after
a certain period of time, if the user still hasn’t opened the application and
seen the new mention, the notification event is triggered. This is the ideal
time to email the user, letting them know they’ve missed something.

Our new package greatly simplifies creating these emails by retrieving the
context from the editor, letting you insert user data such as usernames, and
returning data that can be used in React or HTML email templates.

<div className="my-8 md:my-10">
  <Figure>
    <Image
      src="/images/blog/email-templates-release/new-text-mention-email.jpg"
      alt="New text mention email"
      width={672}
      height={332}
      quality={95}
    />
  </Figure>
  <div className="markdown text-center text-xs! text-marketing-subtler *:mt-2! lg:text-sm!">
    Template in [Next.js Text Editor Emails
    example](/examples/collaborative-text-editor-emails/nextjs-tiptap-emails-resend).
  </div>
</div>

To create the email template in the screenshot, our new function called
[`prepareTextEditorNotificationEmailAsReact`](/docs/api-reference/liveblocks-emails#prepare-text-mention-notification-email-as-react)
can be used to put it together in JSX.

```tsx
const data = await prepareTextMentionNotificationEmailAsReact(/* ... */);

const email = (
  <div>
    <div>
      {data.mention.author.name} mentioned you in {data.roomInfo.name}
    </div>

    <div>
      <img src={data.mention.author.info.avatar} />
      <div>
        {data.mention.author.info.name} {data.mention.createdAt}
      </div>
      <div>{data.mention.reactContent}</div>

      <a href={data.roomInfo.url}>View Document</a>
    </div>
  </div>
);
```

Note that both Tiptap and Lexical are supported, and that we also provide a
similar function for
[creating emails with HTML](/docs/api-reference/liveblocks-emails#prepare-text-mention-notification-email-as-html).

### Start sending unread text editor mention email notifications

To use our new package with Liveblocks Text Editor, you need to set up webhooks
in your app. We have a full guide that explains how to implement every step:

- [How to send email notifications for unread text editor mentions](/docs/guides/how-to-send-email-notifications-for-unread-text-editor-mentions).

## Ready-made email templates [#ready-made-email-templates]

We’ve put together a number of examples with ready-made email templates for you,
built with [React Email](https://react.email/). These examples are a great
starting point for your own notification emails, and can be easily customized to
add your own branding and styles.

<div className="my-8 md:my-10">
  <div className="relative rounded-xl bg-marketing-surface-faded-subtle p-2 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
    <div className="relative aspect-video w-full overflow-hidden rounded-md after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-marketing-divider-subtle">
      <Embed
        src="https://nextjs-comments-emails-resend.liveblocks.app/preview/UnreadMention"
        className="absolute origin-top-left"
        style={{
          width: `${1.6 * 100}%`,
          height: `${1.6 * 100}%`,
          transform: `scale(${1 / 1.6})`,
        }}
      />
    </div>
  </div>
  <div className="markdown text-center text-xs! text-marketing-subtler *:mt-2! lg:text-sm!">
    React Email in our [Next.js Comments Emails
    example](/examples/comments-emails/nextjs-comments-emails-resend).
  </div>
</div>

We have three examples with ready-made templates, which show how they can be
used alongside simple Liveblocks apps:

- [Comments + Resend](/examples/comments-emails/nextjs-comments-emails-resend)
- [Text Editor/Tiptap + Resend](/examples/collaborative-text-editor-emails/nextjs-tiptap-emails-resend)
- [Text Editor/Lexical + Resend](/examples/collaborative-text-editor-emails/nextjs-lexical-emails-resend)

We’re using [Resend](https://resend.com) as the default email provider, but
React Email is powerful, and also supports sending emails with Nodemailer,
SendGrid, Postmark, AWS SES, MailerSend, Plunk, and more.

### Customizing the templates

You can customize the templates for your own brand by simply changing a few
details, for example your company name and logo.

```tsx highlight="3-5"
<UnreadReplies
  company={{
    name: "My Company",
    url: "https://my-company.com",
    logoUrl: "https://my-company.com/logo.png",
  }}
  // ...
/>
```

If you’d like to customize the email styles more deeply, look inside the
`emails` folder where you’ll find the actual templates. For example, in here you
can change the text color to match your company’s branding.

```tsx highlight="5"
<Layout preview={previewText}>
  <Header {...company} />
  <Section>
    <Headline
      style={{ color: "blue" }}
      className="mb-4"
      parts={headlineParts}
    />
    {comments.map((comment, index) => (
      <Comment key={comment.id} {...comment} />
    ))}
  </Section>
</Layout>
```

## Contributors

<Contributors
  gitHubUsernames={[
    "sugardarius",
    "ctnicholas",
    "marcbouchenoire",
    "nimeshnayaju",
    "jrowny",
  ]}
/>