​

Introduction

In this guide, you’ll learn how to add digest functionality to email notifications. But before exploring the actual code, let’s understand what a digest notification is and how it works.

You can find the entire code(frontend as well as backend) for this app here.

​

What is a Digest Notification?

Often when you associate notifications with user activity, the end user can be bombarded with messages because of the nature of the activity. Take for example the case of commenting in the context of a social media app. If you were to send a notification to a user for every comment they receive, and they happen to receive 100 comments, it could lead to user fatigue since you would have to send 100 messages.

This is where digest notifications come into the picture!

A digest notification is a notification that consolidates information from several notifications into one and delivers that notification to the end user instead of several separate messages.

​

How does Digest Notification Work?

Novu has a built-in digest engine that collects multiple trigger events, aggregates them into a single message, and delivers it to the subscriber. You can use the digest engine by adding a ‘digest node’ to your workflow in the workflow editor in the Novu dashboard. If you want to learn more about it, this is a great place to start.

Let’s see it in action now!

​

Add Digest Notification To An App

To get started with this, you need the following:

• A Novu account. Sign up for free if you don’t have one yet.
• A working React development environment.

​

Workflow setup in Novu

Once, you have these, follow the steps below:

1. Head over to the Novu Dashboard.
2. Click Workflows on the left sidebar of your Novu dashboard.
3. Click the Create Workflow button on the top right:

Creating workflows is simple

Once you click the create workflow button, you’ll see a dropdown. Select blank workflow from the dropdown:

Select 'blank workflow' from the dropdown

You’ll now be taken to the workflow editor:

Workflow editor allows you to create and edit workflows

Once here, you can add the channels you want to use for sending notifications and configure them. For this guide, we’ll use the Email channel. You’ll also see the Digest action on the right sidebar.

For example, in our case, say we want the email notification to be sent after every 6 hours. So, add the digest action below the trigger node, and add the email channel node below the digest node as shown below:

Adding a digest node to an email notification workflow

The digest node allows you to set a specific time interval for when notifications should be sent:

Setting time-interval in digest node

Once, you’ve configured it. Go ahead and configure the email channel as per your need:

Configuring the email node as per our requirements

Here’s a brief explanation of all the options:

• 1-Preview: This shows you a glimpse of what the email notification item will look like when delivered to the client.
• 2-Sender Name: Lets you set the sender name for emails that the client will receive.
• 3-Subject: This lets you define the subject line for the emails that the client will receive.
• 4-Filter: This feature allows you to configure the criteria for delivering notifications. For instance, you can apply a filter based on a subscriber’s online status to send them an email if they were online within the last hour.
• 5-Custom Code - In custom code, you can write custom digest templates to show some/all parts of a message.
• 6-Test - This allows you to send a test email to test if everything is working as per your wish.

You can write your own digest template in the ‘custom code’ section or just follow this guide as shown in the picture above. Once you’re done configuring this to your liking, click on the update button on the top right.

It’ll automatically create a trigger code that you can use in your app. To get it, click on the get snippet button on the top right and copy it:

Getting trigger code is simple

Now, let’s see how to add Novu to our app!

​

Add Novu to the Backend and Configure it

In your backend, install the novu package using the following code:

npm install @novu/node

Now, create a route that you want to hit when called from the front end. In our demo app, this is the route:

import express from 'express';

import { getEmailDigest } from '../controller/emaildigest.js';

const router = express.Router();

router.post('/sending-email-digest', getEmailDigest);

export default router;

Now, we need to write a controller function that will handle the logic for what is to be sent in the trigger function’s payload. In our case, this is the controller function:

import { sendEmailDigest } from '../novu/novu.js';

export const getEmailDigest = async (req, res) => {
  const { notif, email } = req.body;
  try {
    await sendEmailDigest(notif, email);
    res.status(201).json({ message: 'success', notif: notif });
  } catch (error) {
    res.status(409).json({ message: error.message });
  }
};

To make it modular, we’ll keep the trigger code in a separate function in a separate file (novu.js, in our case) and the trigger function is getting called in the controller function above by the name getEmailDigest.

If you’re following the guide, you’ve already copied the trigger function. But before we can add it to our app, we need one key thing - Subscribers.

Subscribers are users to which the notifications are sent. You can see a list of subscribers in the Novu dashboard as well.

In our app, we’ll create a subscriber in Node.js as we’re writing our backend in Node.js, but we also have backend SDKs (Node.js, PHP, .NET, Elixir, Go, Ruby, Python, and Kotlin) to choose from. The recommended way to create a subscriber in NodeJS is as follows:

await novu.subscribers.identify('digestEmailSub', {
  firstName: 'digest email subscriber',
  email: email,
});

Here, we’re creating a subscriber with the subscriberID of digestEmailSub. In most real-world scenarios, the subscriberId should be an alphanumeric entity like adfa67y87ad0. You can read more about subscribers here.

Back in our app, we can now add the trigger function:

import { Novu } from '@novu/node';

export const sendEmailDigest = async (notif, email) => {
  const novu = new Novu(process.env.YOUR_NOVU_API_KEY);
  await novu.subscribers.identify('digestEmailSub', {
    firstName: 'digest email subscriber',
    email: email,
  });

  novu.trigger('emaildigestworkflow', {
    to: {
      subscriberId: 'digestEmailSub',
      email: email,
    },
    payload: {
      notif: notif,
    },
  });
};

Now, we just need to hit the route defined above from the front end.

​

Hit the backend route from the front end

From the front end, we just need to hit the route we had defined above. Below, I’m sharing the body component of the demo app I created to illustrate this:

const Body = () => {
  const [formInput, setFormInput] = useState({ notif: '', email: '' });
  const [buttonClicked, setButtonClicked] = useState(false);

  const onSubmitHandler = async (e) => {
    e.preventDefault();
    const response = await fetch(
      'https://emaildigestbackend.onrender.com/api/v1/sending-email-digest',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formInput),
      }
    );
    console.log(response.data);
    setFormInput({ notif: '' });
  };

  const handleClick = () => {
    setButtonClicked(true);

    // Reset the button feedback after a certain duration
    setTimeout(() => {
      setButtonClicked(false);
    }, 100);
  };

  const onChangeHandler = (e) => {
    const value = e.target.name === 'email' ? e.target.value.trim() : e.target.value;

    setFormInput((prev) => ({
      ...prev,
      [e.target.name]: value,
    }));
  };
  return (
    <div>
      <h1>Email Digest Playground</h1>
      <p>
        Don't know how to? Start{' '}
        <a className="underline" href="https://docs.novu.co/platform/digest/">
          {' '}
          here
        </a>
      </p>
      <form onSubmit={onSubmitHandler}>
        <div>
          <div>
            <label htmlFor="email" className="w-48">
              Email:
            </label>
            <input
              placeholder="Your Email here"
              value={formInput.email}
              id="email"
              name="email"
              onChange={onChangeHandler}
            />
          </div>
          <div>
            <label htmlFor="notif">Notification:</label>
            <textarea
              placeholder="Enter the notification text"
              value={formInput.notif}
              id="notif"
              name="notif"
              onChange={onChangeHandler}
            />
          </div>
        </div>

        <button onClick={handleClick} type="submit">
          <BiRightArrowAlt className="text-2xl" />
        </button>
      </form>
    </div>
  );
};

We’re hitting the backend route we had created earlier. The backend has been deployed on render as can be seen in this code snippet above.

Congratulations on following the guide up until this point. We can style our app a little using some TailwindCSS.

If you’ve done everything as recommended, you’ll end up with an app that looks like this:

Filtering by channel

In this app, when we enter the email id, some text in the input box, and click send, the notification appears in the inbox after the delay specified above (when we’re creating the workflow).

This is how we add digest to email notifications!