Get started with iNotify CDN

$(document).ready(function() {
  // Select the element to monitor for changes
  const targetElement = $('#example-element');

  // Initialize iNotify
  targetElement.iNotify({
    // Set the animation type. 'animate' or empty string
    animation: 'animate',

    // Set the animation type for mark as read
    animationType: {
      read: 'pulse'
    },

    // Set the delay between animations
    delay: {
      show: 1500,
      hide: 1500
    },

    // Set the icons and/or messages
    message: [
      'New message',
      'New friend request',
      'New follower'
    ],
    icon: {
      message: 'glyphicon glyphicon-envelope', // Two-tone designed glyphs from Glyphicons
      new: 'glyphicon glyphicon-star',       // Material Design icons from Google
      read: 'glyphicon glyphicon-envelope'
    },

    // Set the sound for notifications
    sound: ['sound1.mp3', 'sound2.mp3'],

    // Call a function when a notification is clicked
    onItemClick: function(type, data) {
      console.log('Notification clicked: ' + type + ' - ' + data.message);
    }
  });

  // Monitor the element for changes
  $('button').click(function() {
    targetElement.iNotify('add', {
      type: 'info',
      message: 'New notification'
    });
  });
});