Learn how to use Novu to quickly send multi-channel (SMS, Email, Chat, Push) notifications with RedwoodJS.
web/src/layouts/BlogLayout/BlogLayout.js
file of the recently cloned project and add the Novu In-App Notification center.
The file should look like this:
REDWOOD_ENV_APPLICATION_IDENTIFIER
and REDWOOD_ENV_SUBSCRIBER_ID
to
the .env
file.Subscriber ID
ideally should be the id
of the logged in user. When a user logs into your app, they’ll be able to see all their notifications in the notification center. For this to work successfully, the user should have been created as a subscriber on Novu.
The Application Identifier
is a public key used to identify your application.
Head over to your Novu dashboard settings, copy the application identifier and add it as the value of REDWOOD_ENV_APPLICATION_IDENTIFIER
.
Head over to the Subscribers page, grab a subscriber identifier and add it as the value of REDWOOD_ENV_SUBSCRIBER_ID
in the .env
file.
Now, check your app, you will see a notification bell button. Click on the button to reveal the notification center UI. Voila!
Channel | Content Style | Custom Variables{{handlebars}} format |
---|---|---|
HTML | ✅ | |
Visual Editor | ✅ | |
SMS | Text | ✅ |
Chat | Text | ✅ |
In-App | Text | ✅ |
Push | Text | ✅ |
Configure it as per your requirements and then save it
Editor
, add the following content and rename the step to Onboarding In App
:
{{ name }}
and {{ message }}
are payload values that will be passed on from
our code to the workflow template so it can appear in the notification sent to
subscribers.Update
button to save the configuration successfully!
In-App
channel.Sender name
and Subject
. Ensure the Default Layout
is selected for the Email Layout.
Switch to the Custom Code
section and add the following:
api/src/services/contacts/contacts.js
, and add the following code into your app to trigger a notification:
<workflow-trigger-id>
should be the workflow’s trigger ID/slug.payload
is an array of the data that you want to be dynamically injected into the workflow content.subscriberId
is the id of the subscriber on Novu.NOVU_API_KEY
is in the .env
file and with the appropriate value gotten from the dashboard./contact
page in the app. Fill the form and click Save
.
The app will trigger two notifications: