A Simple jQuery Plugin To Create A Messenger | jquery.fancyMessenger

jQuery.fancyMessenger is a simple jQuery plugin for creating website messaging. fancyMessenger is a lightweight plugin that displays a floating call button to collect user feedback on your web app.

jquery toast message example, jquery chat plugin, chat popup box in jquery demo, jquery-toast cdn

How to make use of it:

1. Load the minified model of the fancyMessenger jQuery plugin in your doc.

<link rel="stylesheet" href="/path/to/dist/jquery.fancyMessenger.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/jquery.fancyMessenger.min.js"></script>

2. Initialize the plugin and specify easy methods to process suggestions messages utilizing the onSend function.

    // Send your message here.

3. Add a customized avatar to the floating contact button.

.fancyMessenger-avatar {
  background-color: white;
  background-size: cover;
  background-image:url(" ") !important;

4. Set the accessible time. If available, the plugin will add a Checked icon to the contact button.

  available: {

5. Customize the contact button.

    heading:'Send us a message!',
    body:'<form><input class="form-control form-control-sm" type="email" placeholder="Your e-mail address" /><textarea class="form-control form-control-sm" placeholder="Your message"></textarea><button class="btn btn-light btn-sm">Send</button></form>',
    sent:'Message sent!',
    invalidEmail:'Invalid e-mail!'

6. Determine whether or not to shut the contact type after the message has sent.

  closeOnSend: false

Floating Contact Button, jQuery.fancyMessenger Plugin/Github, floating contact button form in jquery messenger app

See Demo And Download

Official Website(myspace-nu): Click Here

This superior jQuery/javascript plugin is developed by myspace-nu. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…