How to build a realtime notification feed using Engagespot

In this tutorial, I will explain how you can build a realtime notification feed on your web application using Engagespot. Before that, I’ll simply introduce what’s a notification feed.

realtime notification panel

Unless you’ve not opened a web application in the last 10 years, you must have seen this, at least once! Notification feeds are already popular in websites like Facebook, Quora, LinkedIn etc. And you’ll see them in other web apps too.

 

Sign up for an Engagespot Free Account

To start, you need to have an Engagespot account. Just go to our website and sign up for an account. Don’t worry, it’s completely free. After completing the signup, you will see a popup to select the website type. Choose SaaS. Done.

Copy the SDK Code to your website.

Add realtime push notification to your web app

Just click the button on your dashboard to copy the code. Then paste it between the <head></head> section of your website source code.

 

Adding the Bell Icon

realtime notification bell icon

Bell icons are really popular, Aren’t they?

To add a similar bell icon to your web application, you just have to decide where you want to show this icon, and add a space there.

  • Add a div/span/a element on your web application where you want to display the bell icon.
  • Add an id to this element.
  • Make sure the positioning of this element is either relative or absolute
  • Adjust the height and width of the element. It should be at least 35px tall and wide.

Now, come back to your Engagespot dashboard. Goto Website -> Settings -> Customize

Notification bell icon settings

  • Make sure the Notification Panel Style is minimal.
  • In the Bell Icon div id field, enter the id of the element that we’ve just created above.
  • Save your settings.

Now go back to your website and see. You can see the bell icon in the position that you’ve specified.

Great! Just click the icon to open the realtime notification feed. It’s empty, right? Because you haven’t sent any notifications yet.

 

How to send a realtime notification?

You can send notifications to your users manually or using our REST API. To send a notification manually, login to our dashboard, go to Notifications and create a notification.

To send the notification via API, follow our REST API guidelines

 
Anand

Anand

I'm the Co-founder of Engagespot. I love blogging about digital marketing and customer engagement on websites. Follow me on twitter - https://twitter.com/anandrmedia