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.

$.fancyMessenger({
  onSend:function(obj){
    // Send your message here.
    console.log($(obj).find("textarea").val());
  }
});

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.

$.fancyMessenger({
  available: {
    timezone:"Europe/Stockholm",
    fromHour:0,
    untilHour:0
  }
});

5. Customize the contact button.

$.fancyMessenger({
  text:{
    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.

$.fancyMessenger({
  closeOnSend: false
});

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

See Demo And Download