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>';