NotificationsJS

Easy Notifications with Notifications.js

Notifications.js makes it really easy to add notifications to your website that are entirely customisable in every way.

Try it out by clicking here to trigger a notification. Although the library provides a default template and CSS style for notifications it's easy to customise both of these to tailor the look and behaviour to your liking.

Lightweight, cross browser notifications

Notifications.js weighs in at just 6kb and comes with just one optional dependency, animate.css.

If you're using another CSS library for animations it's easy to use that instead and avoid any additional dependencies.

Notifications.js is tested across all modern browsers and has browser support for IE8+ and the latest versions of Chrome, Safari, Firefox and Opera.

Easy API for sending notifications

Use the push method to create a notification.

var notifications = new Notifications({});
notifications.push('Hello World');

Integrate easily with Pusher

If you're using Pusher to power realtime notifications you can easily integrate Notifications.js.

var pusher = new Pusher('PUSHER_APP_KEY');
new Notifications({
  pusher: {
    instance: pusher,
    channelName: 'notifications',
    eventName: 'new-notification',
    transform: function(evt) { return evt.text }
  }
});

HTML and CSS fully customisable

You can fully configure the HTML and CSS that are used to put the notifications on the page. Notifications.js ships with a default template and CSS style but it can be easily swapped out for your own.

new Notifications({
  template: function(notification) {
    return '<div class="notification">'
      + notification.text + '</div>';
  }
});

Getting Started

You can install NotificationsJS in a number of ways:

Grab the built version from the lib directory of this repository. NotificationsJS will expose window.Notifications. You'll also need to install animate.css and grab lib/style.css too.
Install through npm: npm install --save notificationsjs. This includes animate.css and the default CSS styles.

Now you can create a new instance of Notifications:

// require / import Notifications or use the global.
var notifications = new Notifications({
});

Finally you need to setup your HTML page.

Include animate.css and the default styling and add a div with an ID of notifications:

<!DOCTYPE html>
<html>
<head>
  <title>Notifications</title>
  <link rel="stylesheet" type="text/css" href="path/to/style.css" />
  <link rel="stylesheet" type="text/css" href="path/to/animate.css" />
</head>
<body>
  <div id="notifications"></div>
  <script src="your-javascript.js"></script>
</body>
</html>

Now you can add a notification with the push method:

var notifications = new Notifications({});
notifications.push('Hello World');

If everything is set up correctly you should see the notification fade in, stay for five seconds and then fade out.

You can also see an example on JSBin.

If you'd like an example of using the library through npm and browserify, check out the getting started example repository.

Next Steps

Check out the API docs to learn fully about how to customise and use Notifications.js.