Facebook Messenger Chat Widget For Website/Blog

Agar aapki Website/Blog hai to aapka Facebook Page bhi jarur hoga, or jo aapke visitor hai jinhe aapke page ke ware me pata hai wo aapko uspar message bhi karte hoge..

Agar visitor ko koi problem aaye ya wo kuch baat karna chahe or wo direct aapki website se facebook par aapko message kar sake to kesa rahega.. ;) isse aapke or visitor ke bich ka connection or jada majbut hoga, jo ek website owner ke liye bhut jaruri hai.

To Chaliye Dekh lete hai Kaise Facebook Messenger Chat Widget ko website me add kar sakte hai, usse phele thoda uske ware me bhi jaan lete hai.

Facebook Messenger Chat Widget Kya hai

Ye ek Widget hai jo Facebook Messenger base hai, jiski madad se koi bhi direct site se facebook messenger par message send kar sakte hai.

Agar aap isko apni site par add karte hai to aapke visitor direct aapki site se aapke facebook page par message send kar payege.

Facebook Messenger Chat Widget Kaise Add kare

Iss Widget ko add karna bhut hi aasan hai, simple aapko usko ek code hai jo aapko apni site me add karna hai.

<style>.fb-livechat,.fb-widget{display:none}.HMH.fb-button,.HMH.fb-close{position:fixed;right:24px;cursor:pointer}.HMH.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;border:0;outline:0;border-radius:60px;-webkit-border-radius:60px;-moz-border-radius:60px;-ms-border-radius:60px;-o-border-radius:60px;box-shadow:0 1px 6px rgba(0,0,0,.06),0 2px 32px rgba(0,0,0,.16);-webkit-transition:box-shadow .2s ease;background-size:80%;transition:all .2s ease-in-out}.HMH.fb-button:focus,.HMH.fb-button:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.09),0 4px 40px rgba(0,0,0,.24)}.fb-widget{background:#fff;z-index:2;position:fixed;width:360px;height:435px;overflow:hidden;opacity:0;bottom:0;right:24px;border-radius:6px;-o-border-radius:6px;-webkit-border-radius:6px;box-shadow:0 5px 40px rgba(0,0,0,.16);-webkit-box-shadow:0 5px 40px rgba(0,0,0,.16);-moz-box-shadow:0 5px 40px rgba(0,0,0,.16);-o-box-shadow:0 5px 40px rgba(0,0,0,.16)}.fb-credit{text-align:center;margin-top:8px}.fb-credit a{transition:none;color:#bec2c9;font-family:Helvetica,Arial,sans-serif;font-size:12px;text-decoration:none;border:0;font-weight:400}.HMH.fb-overlay{z-index:0;position:fixed;height:100vh;width:100vw;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;top:0;left:0;background:rgba(0,0,0,.05);display:none}.HMH.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.HMH.fb-close::after{content:'x';font-family:sans-serif}</style>

<div class="fb-livechat">
  <div class="HMH fb-overlay"></div>
  <div class="fb-widget">
    <div class="HMH fb-close"></div>
    <div class="fb-page" data-href="https://www.facebook.com/hindimehelp/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false">
      <blockquote cite="https://www.facebook.com/hindimehelp/" class="fb-xfbml-parse-ignore"> </blockquote>
    </div>
    <div class="fb-credit"> 
      <a href="http://hindimehelp.com/facebook-messenger-chat-widget/" target="_blank">Facebook Messenger Chat Widget</a>
    </div>
    <div id="fb-root"></div>
  </div>
  <a href="https://m.me/hindimehelp" title="Send us a message on Facebook" class="HMH fb-button"></a> 
</div>
	
<script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>$(document).ready(function(){var t={delay:125,overlay:$(".fb-overlay"),widget:$(".fb-widget"),button:$(".fb-button")};setTimeout(function(){$("div.fb-livechat").fadeIn()},8*t.delay),$(".HMH").on("click",function(e){e.preventDefault(),t.overlay.is(":visible")?(t.overlay.fadeOut(t.delay),t.widget.stop().animate({bottom:0,opacity:0},2*t.delay,function(){$(this).hide("slow"),t.button.show()})):t.button.fadeOut("medium",function(){t.widget.stop().show().animate({bottom:"30px",opacity:1},2*t.delay),t.overlay.fadeIn(t.delay)})})});</script>

Jo ye Code hai isme aapko apne Facebook page ka username dalna hoga.. Aap simple phele iss code ko Notepad me copy kare, uske baad aapko 3 jagha ke URL ko edit karna hai.

1. https://www.facebook.com/hindimehelp/
2. https://www.facebook.com/hindimehelp/
3. https://m.me/hindimehelp

Ye link aapko change karni hai code me, isme aapko simple jo hindimehelp hai us jagha aapko apne Page ka username dalna hai.

uske baad Code ko copy karke aap WordPress / Blogger HTML Widget me add kar dijiye. or agar aap HTML Code me add karna chate hai to Body tag me bhi add kar sakte hai.

Facebook Messenger Chat Widget Kaise Add kare [Video]

Hope iss Widget se aapko jarur help milegi or aap apne visitor se direct connect kar payege facebook par direct apni site se.

Agar kahi koi problem aati hai to aap comment karke bata sakte hai, muje aapki help karne me khusi hogi. :)

Widget Code source: Labnol