HubSpot Messaging Library – Client side Growl-style alerts and transactional messages for your web applications with actions and auto-retry.

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,
Web Editor