On-screen notifications have countless uses. They can share updates, marketing messages, or push info to new users who sign up to a website.
Notification message 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 11 picks for jQuery free notification plugins that’ll knock your socks off.
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 setup with just a copy of jQuery.
jQuery Notification Message Plugins
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.
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.
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
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!)
Grab a copy from the GitHub repo and see what you think.
Lobibox is 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 ways 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.
If you need a plugin with lots of features then PNotify is for you.
This comes packaged with dozens of custom themes and animations for notification boxes. Some features include stickied messages, custom backgrounds, and messages with “X” buttons to close at the user’s discretion.
It’s super easy to alter the notification windows switching between error/warning windows and info windows. You can also choose how to stack messages, where they appear, how large they should be… anything you can think of is editable with this plugin.
For a super tiny notifications plugin Notiny takes the cake. It measures about 5KB compressed which may seem large, but considering what you get it’s definitely a smaller option than many other plugins.
You can install this with a Gulp/Grunt workflow or pull it directly from GitHub.
All the notifications are pretty simple with clean templates and basic animations. This keeps it lightweight and gives you more control over the message styles.
I often recommend the SweetAlert2 plugin for modal windows and alert box replacements. This works a little differently than corner messages because it overtakes the whole screen with a modal block.
However, the design is a lot simpler than you’d expect and it’s really easy to setup.
Keep this in mind as a genuine replacement for native JS alert boxes. Those may grab attention faster but they’re just plain annoying, and nothing can compete with the simplicity of SweetAlert2.
Here’s one other alert window plugin that I think doubles nicely as a notification plugin.
Alertify.js runs on jQuery and doesn’t take up much space. You can use this for modal scripts with a login/signup form, or to embed messages to your visitors.
It also works well for email capture if you’re hoping to build up your newsletter.
Either way, this is just one of many options out there so have a look over this list and see which plugins fit your needs.