CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS, make sure the src matches your project.

<link rel="stylesheet" href="src/css/mk-notifications.min.css">Copy

 JS

Place the following <script> near the end of your page, right before closing </body> tag, make sure the href matches your project.

<script href="src/js/mk-notifications.min.js"></script>Copy

 HTML

To initialize MK Web Notifications plug-in you should call mkNotifications(); function after your document "DOM" is loaded. 

window.addEventListener('load', function() {
    /* MK Web Notification init */
    mkNotifications();
});
For additional configurations please check the Documentation section.

 Quick Start

Call mkNoti(title,message,{ /* Options */ }); function in DOM Ready function or in any DOM Ready function or element to show MK Web Notification in default style. 

/* MK Web Notification Show */
mkNoti(
    'MK Web Notifications (Info)',
    'Example of generated notification with status Info',
    { sound: true }
);Try
For notification options please check the Documentation section.


 Examples

Use the Notifications Generator tool to generate any options you want to use, then simple copy the code and use in your project.


 Themes

Build your own custom theme or use the secondery theme by calling it right after css file.


 Notifications Generator


 Configuration

 Options

 Customize

 Icon
 Link


 Code

 Code

 Documentation

Please use the code generator.