How to implement (Noty) jquery notification in wordpress site

Question

i am newbie in jquery world. I dont know how to implement "Noty - Notification" Plugin in wordpress site, how to create notification and animation etc.. Documentation does not include help files

These are the contents of Plugin

• Layout [FOLDER] (Includes files like bottom.js, bottomleft.js, top.js, topright.js etc...

• Packaged [FOLDER] (Includes two files jquery.noty.packaged.js & jquery.noty.packaged.min.js)

• themes [FOLDER] (includes bootstrap.js, defalut.js & relax.js)

• jquery.noty.js [FILE]

• promise.js [FILE]

Answer 1

the documentation does not include examples? http://ned.im/noty/#/about check it again.. it sure does.

noty({text: 'magic'});

// never use eval unless you know what you do. just try this snippet to see some
// examples in how you can use this.
// for demonstration purposes i simply added the actual code to the buttons visible text.
$("button").click(function(){eval($(this).text())})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.3.7/packaged/jquery.noty.packaged.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<button>
    noty({text: "Hello World!"});
</button><br>
<button>
    noty({text: "message on top right", layout: "topRight"});
</button><br>
<button>
    noty({text: "message on bottom", layout: "bottom"});
</button><br>
<button>
    noty({text: "error!", type: "error", layout: "topRight"});
</button><br>
<button>
    noty({
        text: "this will disappear after 4 seconds",
        type: "error", layout: "topRight", timeout: 4000, 
        animation: {
            open: 'animated bounceInRight', // in order to use this you'll need animate.css
            close: 'animated bounceOutRight',
            easing: 'swing',
            speed: 500
        }
    });
</button>

theese are the default options:

$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme', // or 'relax'
    type: 'alert',
    text: '', // can be html or string
    dismissQueue: true, // If you want to use queue feature set this true
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
    animation: {
        open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
        close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
        easing: 'swing',
        speed: 500 // opening & closing animation speed
    },
    timeout: false, // delay for closing event. Set false for sticky notifications
    force: false, // adds notification to the beginning of queue when set to true
    modal: false,
    maxVisible: 5, // you can set max visible notification for dismissQueue true option,
    killer: false, // for close all notifications before show
    closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
    callback: {
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {},
        onCloseClick: function() {},
    },
    buttons: false // an array of buttons
};