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.

Advertisements

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 For Website Blog

Page Contents

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



Share on:

Hello Friends, I'am Rohit Mewada .. HMH ka Admin. Muje Logo ki Help Karna Acha Lagta hai or Is website Par Me Logo ki Hindi Me Help karta hu :)  Read More...


Leave a Comment

Please Read HMH Comment Policy before Comment.

47 thoughts on “Facebook Messenger Chat Widget For Website/Blog”

    • aap jo remove karna chate hai wo template edit me jakar search karke usko remove kare.. or agar koi free theme hai or usme script ke karan remove nahi ho raha hai to me aapko suggest karuga aap usko remove naa kare ya usko khaid kar use kare.. jisme aap wo aasani se remove kar payege.

      Reply
  1. Sir आपके बताएं गए सभी बातों का ध्यान रखते हुए मैंने सभी सेटिंग किया हुआ है लेकिन मेरा चैटिंग का विजिट या आइकन नीचे ही शो हो रहा है अगर मैं पेज को ऊपर देखता हूं तो नहीं दिखाई देता जब फ्लाइट करके नीचे जाता हूं तभी यह चैट वाला बटन दिखता है तो इसके लिए आपको जरूर बताएं

    Reply
  2. Nice post, Aap ye btaye blog me agr koi comment karta hai aur apne post ka use link dena ho jise click lebel link bane kaise karte hai please btaye

    Reply
  3. Nice Post , Plz help me
    1. Aapke Jaisa Backlink Vala Comment Box me add karna hai
    2. Mujhe koi theme buy karni hai . konsi kru .
    3.maine blogger par blog banaya hai .vo thik hai . ya fir wordpress par shift kar du .
    4. Mere Ab Tak Adsense Apruv Nhi huaa Kya karan hai .

    Reply Fast

    Reply
  4. Sir Maine aapko ek guest post bheja tha use please approve kar de. Maine guest post ko bahut mehnat se likhi thi. Please aap use accept kar le or aap chaahe to usme kuchh edit bhi kar sakte hai

    Reply
  5. sir very nice keep it…!
    sir wordpress me hosting change karne(000webhost free to bluehost or other) per traffice and ranke per parak padhta hai ya nahi. and template change karne per bhi bataye..!!!

    Reply