Messenger is a lightweight JavaScript library for creating customizable and flexible alert messages, prompts, and confirmation dialogs. It provides a simple API to create and manage various types of notifications and user interactions in web applications.

Pros

• Easy to use and integrate into existing projects
• Highly customizable with themes and custom CSS
• Lightweight and dependency-free
• Supports both desktop and mobile browsers

Cons

• Limited built-in themes and styles
• Lacks advanced features like stacking or queueing messages
• No built-in internationalization support
• Documentation could be more comprehensive

Code Examples

Creating a simple alert message:

Messenger().post("Hello, world!");

Displaying a success message with a custom theme:

Messenger().post({
  message: "Your changes have been saved successfully.",
  type: "success",
  showCloseButton: true
});

Creating a confirmation dialog:

Messenger().run({
  successMessage: "Action confirmed!",
  errorMessage: "Action canceled",
  progressMessage: "Waiting for confirmation...",
  action: function(opts) {
    return new Promise(function(resolve, reject) {
      if (confirm("Are you sure you want to proceed?")) {
        resolve();
      } else {
        reject();
      }
    });
  }
});

Getting Started

1. Include the Messenger CSS and JavaScript files in your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/messenger/1.5.0/css/messenger.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/messenger/1.5.0/css/messenger-theme-future.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/messenger/1.5.0/js/messenger.min.js"></script>

2. Initialize Messenger in your JavaScript:

Messenger.options = {
  extraClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
  theme: 'future'
};

3. Start using Messenger to create messages:

Messenger().post("Your first Messenger notification!");