Best Notification plugin for Javascript and jQuery (using iziToast)

aaNotification is the key part of any application.Notification help user to understand the application in a better way or we can say in  a new way. Notifications messages are helpful to get the exact feedback from visitors about the status success or failure of task being carried out.After a lot of research in found iziToast Notification plugin.It’s most Elegant, responsive, flexible and lightweight notification plugin with no dependencies and most important free.


  • 4 built in themes: info, warning, error and success.
  • Easy to add your own themes.
  • Custom icons.
  • Custom images.
  • Custom positions.
  • Auto close with a progress bar.
  • Custom CSS3 transitions.

Getting Started With iziToast:

  •  Install using NPM:
 npm install izitoast --save
  • Install using Bower:
bower install izitoast

After installing the plugin include the CSS files from the dist folder in the head section:

<link rel="stylesheet" href="iziToast.min.css">

Include the JS file before the scripts:

 <script src="iziToast.min.js" type="text/javascript"></script>

Done.Now the plugin is ready to use.


  • Basic Example: Demo{
    title: 'Hey',
    message: 'What would you like to add?'
  • Default Setting Example: Demo
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    onOpening: function(){
        console.log('callback abriu!');
    onClosing: function(){
        console.log("callback fechou!");
  • Opens the toast. (Example with buttons). Demo{
    theme: 'dark',
    icon: 'icon-person',
    title: 'Hey',
    message: 'Welcome!',
    position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
    progressBarColor: 'rgb(0, 255, 184)',
    buttons: [
        ['<button>Ok</button>', function (instance, toast) {
            alert("Hello world!");
        ['<button>Close</button>', function (instance, toast) {
                transitionOut: 'fadeOutUp',
                onClosing: function(instance, toast, closedBy){
          'closedBy: ' + closedBy); //btn2
            }, toast, 'close', 'btn2');
    onOpening: function(instance, toast){'callback abriu!');
    onClosing: function(instance, toast, closedBy){'closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'
  • Closes the specific toast
var toast = document.querySelector('.toast');
    transitionOut: 'fadeOutUp'
}, toast);
  • Destroy all toasts

Four predefined types that have icon and different colors:

  • Info{
    title: 'Hello',
    message: 'Welcome!',
  • Success
    title: 'OK',
    message: 'Successfully inserted record!',
  • Warning
iziToast.warning({ title: ‘Caution’, message: ‘You forgot important data’, });
  • Error

iziToast.error({ title: ‘Error’, message: ‘Illegal operation’, });


  • Capture when the toast is opening.
// You can compare by any option (id, class..)
document.addEventListener('iziToast-open', function(data){
    if(data.settings.class == 'test'){ // data.detail will have all toast settings.'EventListener iziToast-open');
  •  Capture when the toast is closing.
document.addEventListener('iziToast-close', function(data){
    if(data.settings.class == 'test'){'EventListener iziToast-close');;

More Details: iziToast

0 thoughts on “Best Notification plugin for Javascript and jQuery (using iziToast)

Leave a Reply

Your email address will not be published.

000webhost logo