Desktop Notification Style Alert & Toast Message Plugin - MK Web Notifications

Desktop Notification Style Alert & Toast Message Plugin - MK Web Notifications
File Size: 95.2 KB
Views Total: 6169
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

MK Web Notifications is a jQuery plugin used for generating Desktop Notification style alert and toast message boxes that slide in from the edge of your screen.


  • Font Awesome based notification icons.
  • Custom X and Y positions.
  • Allows to specify the max number of notifications to display at a time.
  • 9 built-in themes: Default, Primary, Success, Danger, Warning, Info, Light, Dark, Purple.
  • RTL and LTR supported.
  • Allows to linkify the notifications.

How to use it:

1. Include the necessary jQuery library and Font Awesome Iconic Font on the webpage.

<link rel="stylesheet" 
<script src="" 

2. Include the MK Web Notifications plugin's JavaScript and CSS files.

<link href="src/css/mk-notifications.css" rel="stylesheet">
<script src="src/js/mk-notifications.js"></script>

3. Initialize the MK Web Notifications plugin and we're ready to go.


4. Create a new notification box on the webpage.

  'Notification Title',
  'Notification Body'

5. Config the MK Web Notifications plugin.

  positionY: 'right',
  positionX: 'bottom',
  scrollable: true,
  rtl: false, // true = ltr
  max: 5 // number of notifications to display

6. Customize the notification box with the following options.

  'Notification Title',
  'Notification Body', {

    // Default, Primary, Success, Danger, Warning, Info, Light, Dark, Purple
    status: 'default',

    // Custom icon
    icon: {
      class: null,
      color: null,
      background: null

    // Linkify the notification box
    link: {
      url: null,
      target: '_self',
      function: null

    // Is dismissable?
    dismissable: true,

    // Auto dismisses after 7 seconds
    duration: 7000,

    // Callback function
    callback: null,

    // Enable sounds
    sound: false,

    // Custom sound files
    customSound: null,


Change log:

v1.5.3 (2018-04-27)

  • Added theme as option.
  • Improved Notification Generator.
  • Fixed errors and bugs in sound.
  • Improved RTL compatibility.

This awesome jQuery plugin is developed by mahkassem. For more Advanced Usages, please check the demo page or visit the official website.