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


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:

  1. The Notification Modal component shows the user's notifications in real-time and also enables the user to configure the preferences.
  2. 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
  2. Create new notification template
  3. Notify users using the API

(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).

EmailEmail.js, SendGrid, Mailgun, Mailjet, Mandrill, Nodemailer, Postmark, Sendinblue, SES, NetCore
SMSNexmo, Plivo, sms77, SNS, Telnyx, Twilio, Gupshup, Firetext
Pushcoming soon
Chatcoming 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:

{{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.