"FB MESSENGER With Drag Move blue color"
Bootstrap 3.0.0 Snippet by agiltriono

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' /> <div class="container"><!-- container --> <div class="row"><!-- row --> <p>Click Messenger Button To Open Messenger</p> <div class="buttons rounded text-center"> <a href="#" id="addClass"><span class="fa fa-facebook-square"></span> Messenger </a> </div> <div class="text-center follow-me"> <H4>Follow Me</H4> </div> <div class="social"> <a class='btn btn-danger' href='https://plus.google.com/u/0/103710542461561194864'> Google</a> <a class='btn btn-primary' href='https://www.facebook.com/agilt.5'> Facebook</a> <a class='btn btn-info' href='https://twitter.com/agieltriono'> Twitter</a> </div> </div><!-- row --> </div><!-- container --> <div class="chat_box" id="fb_msg"><!-- chatbox --> <div class="chatheader"> Agiel Screamolove</div> <!-- your name --> <div class='close-chatfb' id="removeClass"></div><!-- close chat --> <div class="pesan_chat"><!-- chat content --> <script type='text/javascript'> // THIS IS YOUR PAGE PLUGIN GO TO https://developers.facebook.com/docs/plugins/page-plugin //<![CDATA[ document.write('<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>'); //]]> </script> </div><!-- chat content --> </div><!-- chatbox -->
/* chat */ .chat_box{background:#fff;width:270px;height:363px;position:fixed;bottom:0px;right:14px;border:none;border-radius:5px 5px 0 0;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);overflow:hidden;z-index:1000000;display:none} .pesan_chat{text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px} .chatheader{margin:0 auto;padding:0 10px;height:35px;line-height:35px;font-size:16px;font-weight:700;color:#fff;text-align:left;display:block;cursor:pointer;background:#3a5897;cursor:move} .chatheader:before{content:'\f111';font-family:fontawesome;color:#42b72a;font-size:12px;position:relative;top:-2px} .pesan_chat p{color:#616161;font-size:14px;margin:10px;cursor:move} .close-chatfb{position:absolute;top:0;right:0;font-family:fontawesome;font-size:15px;font-weight:inherit;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7} .close-chatfb:hover,.maxi-chatfb:hover,.mini-chatfb:hover{opacity:1} .close-chatfb:before{content:'\f00d';font-family:fontawesome} .buttons.rounded{margin:40px 0 0;} .buttons.rounded.buttons.rounded a{border:2px solid #2c4584;border-radius:35px;color:#2c4584;font-size:23px;padding:10px 21px;text-decoration:none;font-family:'Open Sans',sans-serif;} .buttons.rounded a:hover{border:2px solid #138be6;border-radius:35px;color:red;color:#000;font-size:23px;padding:10px 21px;text-decoration:none;} .popup-on{display:block!important;} @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); a:link{text-decoration:none;outline:none;transition:all 0.25s;} a:visited,a:link:hover,a:visited:hover{text-decoration:none;} body{background:#eaeaea none repeat scroll top left;color:#444;font-family:'Open Sans',sans-serif;margin:0;padding:0;position:relative;line-height:normal;} .container{background:#fff;max-width:320px;height:300px;margin:5% auto;padding:10px;box-shadow:0 10px 5px -5px rgba(0,0,0,0.1);border:1px solid #ccc;font-family:'Open Sans',sans-serif;} .row p {text-align:center;font-family:font-family:'Open Sans',sans-serif;} .follow-me{padding:0;margin-top:2em} a.btn-danger:before{content:'\f0d5';font-family:fontawesome} a.btn-primary:before{content:'\f09a';font-family:fontawesome} a.btn-info:before{content:'\f099';font-family:fontawesome} .social {width:100%;position: relative;min-height: 1px;padding:10px 0px 0px 20px;}
// Fast Loading function init() { var vidDefer = document.getElementsByTagName('iframe'); for (var i=0; i<vidDefer.length; i++) { if(vidDefer[i].getAttribute('data-src')) { vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src')); } } } window.onload = init; // drag move $(function() { $( "#fb_msg" ).draggable({ containment: "window" }); }); // BUTTON $(function(){ $("#addClass").click(function () { $('#fb_msg').addClass('popup-on'); }); $("#removeClass").click(function () { $('#fb_msg').removeClass('popup-on'); }); })

Related: See More


Questions / Comments: