Notifications
Introduction
ROQ's notifications enable you to notify your users or user groups on various channels:
- In-app notifications, loaded in real-time using a socket connection directly from your web app using the Notification Modal UI component.
- notifications via SMS or push messages to the mobile phones of your users
- chat systems like Slack and Discord
- and traditional e-mails.
Users can define their preferences for every type of notification. For instance, alerts can be retrieved via push message, while product updates are delivered via e-mail.
Please look at the mail feature if you want to send a transactional email to someone who isn't a user yet.
Video tutorial
Our VPE, Praveen Koka, shows how to integrate ROQ's notification feature into your Next.js application: 🎬 Video tutorial
Installation
To install notifications, you need to perform a few simple steps, described in the feature's installation guide.
UI components
ROQ's notification feature ships with two main UI components that you can easily integrate into your application:
- The Notification Modal component shows the user's notifications in real-time and also enables the user to configure the preferences.
- The Notification Bell component renders a bell symbol which informs the user about unread notifications.
How to use notifications
To notify users via ROQ's API, you need to perform these steps:
(1) Configure channel providers
ROQ is using multiple providers to notify users. You can active and configure one provider per channel in ROQ Console (opens in a new tab).
| Channel | Providers |
|---|---|
| Email.js, SendGrid, Mailgun, Mailjet, Mandrill, Nodemailer, Postmark, Sendinblue, SES, NetCore | |
| SMS | Nexmo, Plivo, sms77, SNS, Telnyx, Twilio, Gupshup, Firetext |
| Push | coming soon |
| Chat | coming soon |
(2) Create new notification template
You can manage new notification templates in ROQ Console (opens in a new tab). Each template requires a unique
key which will be used as a reference to trigger notifications using the API.
For each notification template you can configure and activate multiple channels. There are five channels to choose from:
- In-app notifications, using the Notification Modal UI component.
- SMS
- Push messages
- Chat systems like Slack and Discord
- and traditional e-mails.
For each activated channel, you can select and icon and enter localized content using dynamic variables like this:
You got {{points}} points!These variables can be submitted using the data parameter of the notify() API.
You can also use these pre-defined variables to enrich your content:
| Variable | Description |
|---|---|
{{recipient.firstName}} | The first of the user who receives the notification |
{{recipient.lastName}} | The last of the user who receives the notification |
{{BASE_URL}} | The base URL of your application that you configured in ROQ Console. |
(3) Notify users using the API
The notification API enables you to notify users of our application. Check out the docs here.