jQuery Notification Message Plugins
JQuery Notification message Plugins started with desktop OS’ but they’ve since been ported to the web with some great plugins. And I’ve curated this list of my top 7 picks for jQuery free notification plugins.
These all have unique designs and features so no two plugins are alike. But they all share the same values of being 100% free, open-source, and pretty easy to set up with just a copy of jQuery.
jQuery Notification Plugins For Message
The Noty plugin uses a bunch of custom animations and beautiful message designs. You have full control over the animation styles and the color choices, but the defaults should work with any site.
Each Noty message slides into view from the corner of the screen and just looks like a small tooltip rectangle. It doesn’t force the user’s attention and it doesn’t block out the main page.
With Postcards, you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom email templates faster than ever before.
Best of all, these messages are fully responsive and designed to fit any screen. Use it for notification errors, warnings, quick updates, anything!
Have a look at the GitHub repo for more info and to dive deeper into Noty’s documentation.
Looking for an even smaller notification box? Check out Notify.js which also runs on jQuery.
This one’s designed for simplicity so the default styles are pretty bland. However, you can shape them to fit whatever you need and the plugin comes with a bunch of custom options.
Here’s a unique plugin that lets you run dropdown notifications across the entire top section of the screen. Overhang.js works much like a dropdown bar notification system, maybe something you’d find in mobile apps but rarely on the web.
With Startup, you can build a website online using the Bootstrap builder with ready-made designed and coded templates and themes.
I think this would be most useful as a marketing tool for promoting new offers, sales, articles, whatever. The dropdown effect is subtle but still grabs attention.
You can define the messages to run on a timer, or to black out the page, or to run on custom user callbacks. Plenty of options to edit making this plugin a unique choice for web designers.
And of course, this plugin works on mobile too so it’s very responsive friendly.
Amaran.js describes itself as a sleek and stylish notification plugin. This is certainly a lesser-known project among the many other choices here, but it works just the same and comes with a lot of pre-built demos.
Have a look at the main page to look over the live examples. I was able to view all the demo pages but I could not get any of the “main” pages to load(404 errors). Thankfully the install & setup info can be found on GitHub too.
Use this plugin as more of a starting point for customizing your own notifications. I don’t think Amaran is perfect straight out of the box.
But it does offer a lot in the way of customization so it’s perfect for devs who like tweaking.
5. jQuery Growl
jQuery Growl is one heck of a notifications plugin. This is surprisingly small and it feels much like the OS X Growl system.
This library is small code-wise but it has a large footprint of required files. You’ll need a copy of the jQuery library along with the Growl plugin’s JS + CSS files. Still not too bad considering how quickly you can get this setup(only requires 1 line of code!)
Lobibox is a one-part notification plugin and one-part modal window plugin. It’s a very large library but it has everything you’d need for custom notifications on your site.
The documentation is pretty clear but you have to scroll quite a way down the page to find the live demos. And there’s a lot to go through so be sure to test them all!
You can use this as a replacement for the default alert boxes, or for legal agreement windows, or just for simple corner alert message boxes. Plenty of room to customize.
Actually, this plugin has a full demo page that includes custom editing fields. You can change the message box’s style, animation, position, everything. And you can test it live in your browser before downloading the script.
Plus on the demo page, you’ll get the full code output that you can copy & paste to replace the feature on your own site.