Hub Spot Messaging Library – Growl-style alerts and transactional messages for your web applications.

Client-side growl-like notifications with actions and auto-retry.

  • Show transactional messages in your app.
  • Wrap AJAX requests with progress, success and error messages.
  • Add action links to your messages.
  • 4kb minified and compressed.
  • Works in everything modern, and IE7 and above.
  • Ability to change themes of notification messages
  • Show messages in your app.
  • Wrap AJAX requests with progress, success and error messages, and add retry to your failed requests.
  • Add actions (undo, cancel, etc.) to your messages.

Messenger is different from other solutions for a few reasons:

  • Each message can be updated after being posted without losing it’s place
  • Actions and events can be bound to messages
  • It’s completely theme able with CSS
  • A ‘tray’ element exists to allow you to style the box around the messages, and limit the number of messages on the screen

The full list of options:

  • message: The text of the message
  • type: info, error or success are understood by the provided themes. You can also pass your own string, and that class will be added.
  • theme: What theme class should be applied to the message? Defaults to the theme set for Messenger in general.
  • id: A unique id. If supplied, only one message with that ID will be shown at a time.
  • singleton: Hide the newer message if there is an id collision, as opposed to the older message.
  • actions: Action links to put in the message, see the ‘Actions’ section on this page.
  • hideAfter: Hide the message after the provided number of seconds
  • hideOnNavigate: Hide the message if Backbone client-side navigation occurs
  • showCloseButton: Should a close button be added to the message?
  • closeButtonText: Specify the text the close button should use (default ×)

Messenger also includes aliases which set the type for you: Messenger().error(), Messenger().success(), and messenger().info().

Requires

  • – jQuery
  • – Plays well with, but doesn’t require, Bootstrap

Including

JS

/build/js/messenger.min.js/build/js/messenger-theme-future.js

CSS

/build/css/messenger.css/build/css/messenger-theme-future.css

Also available as a Rails gem and on cdnjs.

Quick Usage

# Replace:
$.ajax
    url: "/some-url"
    success: ->

 

# With:
Messenger().run
    errorMessage: "This did not go well."
,
    url: "/some-url"
    success: ->

 

 


Website: http://github.hubspot.com/messenger/docs/welcome/

Reference Documentation: http://github.hubspot.com/messenger/

Source Code: https://github.com/HubSpot/messenger


Thanks for reading,
Nabeel Shahid.