Once you click the `create workflow` button, you’ll see a dropdown. Select `blank workflow` from the dropdown:
You’ll now be taken to the workflow editor:
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.
The `digest` node allows you to set a specific time interval for when notifications should be sent:
Once, you’ve configured it. Go ahead and configure the `email` channel as per your need:
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:
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:
```bash theme={null}
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:
```jsx theme={null}
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:
```jsx theme={null}
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](https://web.novu.co/subscribers?utm_campaign=docs-digests) 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](/sdks/introduction) ([Node.js](https://github.com/novuhq/novu/tree/next/packages/node), [PHP](https://github.com/novuhq/novu-php), [.NET](https://github.com/novuhq/novu-dotnet), [Elixir](https://github.com/novuhq/novu-elixir), [Go](https://github.com/novuhq/go-novu), [Ruby](https://github.com/novuhq/novu-ruby), [Python](https://github.com/novuhq/novu-python), and [Kotlin](https://github.com/novuhq/novu-kotlin)) to choose from. The recommended way to create a subscriber in NodeJS is as follows:
```jsx theme={null}
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](https://docs.novu.co/platform/subscribers/).
Back in our app, we can now add the trigger function:
```jsx theme={null}
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:
```jsx theme={null}
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 (
Don't know how to? Start{' '} {' '} here
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!