<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="chat-fb" id="Chatbox"> <div class="chat-header"> Messenger </div> <div class='close-chatt' id="close-Box"> <i class="glyphicon glyphicon-ban-circle remove-chat"></i></div> <div class="messages_chat"> <p> Hai! You Can Send Anything Word Here... Thank You.</p> <!-- You Can Add Your Facebook Page Plugin messenger Below --> <script type='text/javascript'> //<![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=false&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>'); //]]> </script> <!-- END IFRAME --> </div> </div> <center> <h2> Chat With Me ?</h2> </center> <div class="button btn-centered"> <button id="open-box"><span class="glyphicon glyphicon-comment"></span> Open Messenger </button> <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>

/* chat */ .chat-fb{background:#fff;width:270px;height:435px;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} .messages_chat{cursor: move;text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px} .chat-header{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: move;background:#00b0ff} .messages_chat p{color:#616161;font-size:14px;margin:10px} .close-chatt{position:absolute;top:0;right:0;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7} .close-chatt:hover{opacity:1} .Chat-box-on{display:block!important;} .remove-chat {position: relative;top: 1px;left: -4px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} button {border-radius:4px;color:#fff;outline:none;font-family:;font-size: 16px;line-height: none;border:none;background:#00b0ff} button:hover,btn-default:hover{border-radius:4px;color:#ddd;border:#00b0ff} .btn-centered{text-align:center}

$(function(){ $("#open-box").click(function () { $('#Chatbox').addClass('Chat-box-on'); }); $("#close-Box").click(function () { $('#Chatbox').removeClass('Chat-box-on'); }); }) $(function() { $( "#Chatbox" ).draggable({ containment: "window" }); }); //<![CDATA[ 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; //]]>