Learn how to integrate Novu into your vanilla JS app on the fly. Send notifications across different channels (SMS, Email, Chat, Push) and enable real-time In-App notifications with the help of a rich and customizable Notification Center.

​
Requirements

To follow the steps in this quickstart, you’ll need:

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

You can find the code for this project here

​
Loading Notification center component from the CDN

The Notification Center Web Component is a custom element that can be used in any web application.

You can find out more about the web component here.

In our case, we’ll be using the bundled version of the Notification Center Web Component that is available on the CDN.

You can load the Notification center component using the CDN as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- CDN link for Novu notification center component -->
    <script src="​https://web-component.novu.co/index.js"></script>
  </head>
  <body>
    <!-- HTML body -->
    <!-- the notification center -->
    <notification-center-component
      style="display: inline-flex"
      application-identifier="<YOUR_APPLICATION_IDENTIFIER>"
      subscriber-id="<YOUR_SUBSCRIBER_ID>"
    ></notification-center-component>
  </body>
</html>

You’ll notice the use of two things in the above code - application-identifier and subscriber-id.

An application identifier is a public key used to identify your application. You can get your own application identifier from the Novu dashboard settings.

And subscribers are users to which notifications will be sent. They are identified by a subscriberID which you can also find in the Novu subscribers dashboard. Let’s learn more about subscribers.

​
Subscribers in Novu

If you click “Subscriber” on the left sidebar of the Novu dashboard, you’ll see the subscriber list. By default, there will only be one subscriber as you’re automatically added as a subscriber when you sign up for Novu:

Subscribers from the left sidebar shows all the subscriber

If you don’t see the default subscriber, follow how to create subscriber documentation to learn on how to create one

Now, let’s create a subscriber on Novu. After creating a subscriber, we’ll trigger a notification to this subscriber. Subscribers are identified by a unique subscriberId.

With Novu, you can create a subscriber using any of its SDKs (Node.js, PHP, .NET, Go, Ruby, Python and Kotlin). The code to create a subscriber in Novu is:

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

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.identify('123', {
  firstName: 'Sumit',
  lastName: 'Saurabh',
  returnUser: true,
});

You can get your API key from the Novu dashboard. Replace <NOVU_API_KEY> with it. Now, if you’ll go to the Novu dashboard, you shall see the subscriber we created above with subscriberId of 123.

You can also update information about an already existing subscriber using the subscriber.update method as shown below:

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

const novu = new Novu('<NOVU_API_KEY>');

await novu.subscribers.update('123', {
  firstName: 'Saurabh', // new first name
  lastName: 'Sumit', // new last name
});

​
Create a workflow

Before triggering a notification, we need to create a workflow. A workflow is like a blueprint that all the notifications are supposed to follow.

The recipients of a triggered notification are called subscribers.

The workflow includes the following:

  • Workflow name and Identifier
  • Channel tailored content:
Channel

Content Style

Custom Variables
{{handlebars}} format
EmailHTML✅
Visual Editor✅
SMSText✅
ChatText✅
In-AppText✅
PushText✅

These are the steps to create a workflow:

  1. Click Workflows on the left sidebar of your Novu dashboard.
  2. Click the “Create Workflow” button on the top right.
  3. The name of the new workflow is currently “Untitled”. Rename it to a more suitable title.
  4. Select “In-App” as the channel you want to add.

Select the in-app channel

  1. Click on the recently added In-App channel and configure it according to your preferences. Once you’re done, click Update to save your configuration.

Configure it as per your requirements and then save it

I’ll briefly explain the function of each label in the image above.

  • 1-Preview: Shows you a glimpse of how each notification item will look like in the Notification Center UI.
  • 2-Avatar: If turned on, each notification item will show the avatar of the subscriber.
  • 3-Action: With this, you can add a primary and secondary call to action button to each notification item.
  • 4-Notification Feeds: This displays a stream of specific notifications. You can have multiple feeds to show specific notifications in multiple tabs.
  • 5-Redirect URL - This is the URL to which a subscriber can be directed when they click on a notification item.
  • 6-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.

In our case, we’ll use the custom variables functionality, as shown below:

We'll use the custom variables functionality

Feel free to add only text for now and rename the workflow to quickstart. It automatically creates a slug-like Identifier that will be needed in later steps to trigger a notification.

Having created a workflow and having our subscriberID, we’re ready to send notifications using Novu!

​
Using Novu in a vanilla JS app

We have already used the CDN to get the notification center component and we already have all the credentials that we need. To use it in an app, simply use the notification-center-component in your html file as shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <!-- CDN link for Novu notification center component -->
    <script src="​https://web-component.novu.co/index.js"></script>
  </head>
  <body>
    <notification-center-component
      style="display: inline-flex"
      application-identifier="<YOUR_APPLICATION_IDENTIFIER>"
      subscriber-id="<YOUR_SUBSCRIBER_ID>"
    ></notification-center-component>

    <script>
      // here you can attach any callbacks, interact with the web component API
      // You can also move this to a separate js file and have all the callbacks and other logic there
      let nc =document.getElementsByTagName('notification-center-component')[0];
      nc.onLoad = () => console.log('hello world!');
    </script>
  </body>
</html>

You can add all the logic you want to add to the script element at the bottom or move it all into a separate JavaScript file (don’t forger to link to the JavaScript file in this case).

Here’s an example of such an HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="​https://web-component.novu.co/index.js"></script>

    <title>Vanilla JS app</title>
  </head>

  <body>
    <div>
      <h1>Notification generator</h1>
      <notification-center-component
        style="display: inline-flex"
        application-identifier="<YOUR_NOVU_APPLICATION_IDENTIFIER>"
        subscriber-id="123"
      ></notification-center-component>
    </div>
    <div class="">
      <form action="#" method="post" class="form">
        <input class="input" placeholder="Enter notification text" type="text" name="description" />
        <button class="btn">Send</button>
      </form>
    </div>
  </body>
  <script src="./app.js"></script>
</html>

And the corresponding script file is as follows:

const btn =document.querySelector('.btn');
const input =document.querySelector('.input');
const form =document.querySelector('.form');

const onClickHandler = async (e) => {
  e.preventDefault();
  const desc = input.value;
  console.log(desc);
  try {
    const resp = await fetch('<The API route from your backend>', {
      method: 'POST',
      body: JSON.stringify({
        description: desc,
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    });
    input.value = '';
    console.log(resp);
  } catch (err) {
    console.log(err);
  }
};

form.addEventListener('submit', onClickHandler);

// here you can attach any callbacks, interact with the web component API
let nc =document.getElementsByTagName('notification-center-component')[0];
nc.onLoad = () => console.log('hello world!');

The front-end as well as the back-end code for the sample application can be found here for illustration.

​
Code to trigger the notification

We can trigger a notification by simply executing the trigger code snippet we get from the Novu web dashboard.

To get the snippet:

  1. Go to Workflows in the left sidebar on Novu web dashboard.
  2. Select the workflow.
  3. Click the Get Snippet button on the top right.

Here’s the trigger snippet you’ll receive:

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

const novu = new Novu('<API_KEY>');

novu.trigger('quickstart', {
  to: {
    subscriberId: '<REPLACE_WITH_DATA>',
  },
  payload: {
    description: '<REPLACE_WITH_DATA>',
  },
});

Make sure you’re executing this code with the correct credentials.

​
Conclusion

Great job! If you’ve reached this point, you should now have successfully set up the notification center, created a subscriber, a workflow, configured a channel provider and triggered a notification in your React application.

Was this page helpful?

AngularRedwoodJS