Tips

How to add a realtime notification feed component in React, Angular, Vuejs or any other Javascript app.

by Anand 5 min read

In this article, we’ll learn how to add a realtime notification feed to a Javascript front-end application. This tutorial has four parts to explain how to implement this functionality in React.js, Angular, Vue or any other vanilla javascript applications.

I will also add Codesandbox examples so you can play around with the source code and learn from it.

So, let’s get started.

Prerequisites

In this tutorial, we’ll be using Engagespot to add the notification feed to our app. So make sure you’ve obtained your free API Key from Engagespot.

Adding the notification center to a React.js app.

In this section, we’ll learn how to add a realtime notification feed to an existing react.js application.

Install Engagespot react component.

Use npm or yarn to install the notification component library to your react.js project.

npm i @engagespot/react-component

OR

yarn add @engagespot/react-component

Import the Engagespot component

Usually, notification bell icons are placed on the top header of apps, and only for logged in users. So, let’s import the Engagespot component, and render it within the header component of our app.

import { Engagespot } from '@engagespot/react-component';

Render the notification feed within our header component

To render the notification component, all we need to do is to add the Engagespot component within our header component. We must make sure that the feed should be added to pages that can only be accessed by logged in users.

<Header>
    <AppLogo/>
    <NavBar/>
    <Engagespot 
        apiKey="YOUR_ENGAGESPOT_API_KEY" 
        userId="youruser@example.com" 
    />;
</Header>

In the above code, we should replace the userId with the variable that contains the unique id of the current logged in user. Unique id could be anything such as their email, or database id, or a UUID or anything that never changes.

Done! We have successfully added the notification center on our React.js application.

The above example is available on codesandbox

Adding the notification center to an Angular app.

In this example, we’ll be adding a realtime notification feed to our Angular app. At the end of this section, I’ll share the link to a codesandbox example.

Install Engagespot esm module.

Use npm or yarn to install the notification component esm library to your Angular project.

npm i @engagespot/client

OR

yarn add @engagespot/client

Import the render function

In this example, we’ll import the render function from @engagespot/client library to our app.component.ts.

import { render } from "@engagespot/client";

Render the notification feed inside a component

We’ll render the engagespot notification feed component to a div that we already created.


 @ViewChild('engagespotBellIcon') engagespotBellIcon: ElementRef;

  ngAfterViewInit() {
    render(this.engagespotBellIcon.nativeElement, {
      apiKey: "ENGAGESPOT_API_KEY",
      userId: "YOUR_USERS_UNIQUE_ID",
       theme: {}, //Theme Object to Customize the look and feel of the notification inbox.
    });
  }

The above example is available on codesandbox

Adding notification center to Vuejs app.

For vue.js apps, the steps are similar to that of Angular. You can import the render function from @engagespot/client library and use that to add the realtime notification feed.

Example for Vue.js available on codesandbox

Sending a notification to test the implementation

Now you’ve learned how to add a notification center to React.js or Angular or Vue.js app. To test the implementation, we’ll try to send a notification using the Compose feature in Engagespot dashboard.

It works!

For real apps, we’ll use the Engagespot REST API or SDKs to trigger notifications programatically from our backend code.

Update cookies preferences