We are adding in notifications to our website. Here's our rundown:
- humane.js
- http://wavded.github.io/humane-js/
- Doesn't support message stacking
- Supports multiple colors
- Doesn't have "
xto close" built into it?
- Notifier.js
- http://rlemon.github.io/Notifier.js/
- Has message stacking
- Supports dynamic images
- Doesn't have "
xto close" built into it? - Images look weird...
- 8kb gzipped + minified
- AlertifyJS (two forks)
- https://alertifyjs.org/
- http://alertifyjs.com/
- Has message stacking
- Doesn't have "
xto close" built into it but seems to haveinnerHTMLsupport - https://github.com/alertifyjs/alertify.js/blob/v1.0.11/dist/js/alertify.js
- 3kb gzipped + minified (JS with embedded CSS)
- https://github.com/MohammadYounes/AlertifyJS/blob/1.6.1/build/alertify.js
- 9kb gzipped + minified
- notie
- https://jaredreich.com/projects/notie/
- Full bar at top, not for us
- noty
- http://ned.im/noty/#/about
- Has message stacking
- Doesn't have "
xto close" built into it? - https://github.com/needim/noty/blob/v2.3.8/js/noty/packaged/jquery.noty.packaged.min.js
- 5kb gzipped + minified
- Bootstrap Notify
- http://bootstrap-notify.remabledesigns.com/
- Has stacking
- Has "
xto close" - Preview is buggy (notifications keep on reappearing)
- https://github.com/mouse0270/bootstrap-notify/blob/3.1.3/bootstrap-notify.min.js
- 3kb gzipped + minified (+ Bootstrap dependencies)
- Messenger
- http://github.hubspot.com/messenger/docs/welcome/
- Has stacking
- Has "
xto close" - Matched our theme best with "Block" theme
- https://github.com/HubSpot/messenger/blob/v1.5.0/build/js/messenger.min.js
- 6kb gzipped + minified
We are going to go with AlertifyJS (.org) as it is small and supports prompt dialogs (which reduces our stylized modal needs in the future). If that falls through (e.g. we can't get x to dismiss working), then we will go with Messenger.
Proof of concept for AlertifyJS looks good: http://codepen.io/twolfson/pen/JXQPVN