Facebook Messenger Chat Widget Ko Blog/Website Me Add Kaise Kare

How to Add the Facebook Messenger Chat Widget in your Website. Hello dosto kya aap ek blogger hai, to aapne apne blog ke liyefacebook like page jarur crate kiya hoga.

Aur aap ke page like hue honge to visitors aap ke facebook page par message bhi jarur karte honge. Par us ke liye aap ke visitors ko aap ke facebook page par visit kar ke message karna hota hoga.

But agar aap chahe to apne visitor ki asani ke liye apne blog/website par hi facebbok messenger ka option add kar len. Jisse aap ke visitors aap ke blog ya website se, Direct Facebook page par facebook messenger se message send kar shakte hai.

How to Add Facebook Messenger Chat Widget in your Website

Facebook Messenger ko apne blog ya website par add kar dene se. App ke aur visitors ke beech ka connection pahle se kahi jayada majbut ho jayega. Jo ki her ek blog ya website owner chahta hai. To cahliye aur jayada baat na karte huwe. Ab hum log jaan lete hai ki ‘Facebook Messenger Chat Widget Ko Blog/Website Me Kaise Add Kare’. But us se pahle jaan lete hai Facebook Messenger kya hai.

Facebook Messenger Widget Kya Hai?

Ye ek Widget hai jo Facebook Messenger base hai, is widget ki madad se koi bhi visitor direct apki site se facebook page messenger par message send kar sakta hai.

Agar aap is widget ko apni site par add karte hai to aapke visitor ko aapse contact karne me bahut aasani hogi aur vo direct aapki site se aapke facebook page par message send kar payege.

Also Read : Facebook Page Kya Hai Aur Facebook Page Kaise Banaye

Facebook Messenger Chat Widget Ko Blog/Website Me Add Kaise Kare?

Facebook Messenger Chat Widget ko apne blog/website me add karna bahut hi aasan hai. Iske liye aapko jada kuch karne ki jarurat nahi hai.

Bus aapko ek code apne blog me add kar dena hai. Us ke baad aap ka Facebook Messenger Chat Widget ek contact form ki tarah se work karne lagega.

To chalye dosto ab ham apne asal topic par chalte hai aur aapko batate hai ke facebook messenger widget ko apne blog me kaise add kiya jata hai.

Step 1 :

Sab se pahle aap niche diye gaye chart widget code ko copy karke Notepad ya Notepad++ me pest kare aur apne blogger ya wordpress account me login kar dashboard par jaye.

<style>.fb-livechat,.fb-widget{display:none}.ONJ.fb-button,.ONJ.fb-close{position:fixed;right:24px;cursor:pointer}.ONJ.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}.ONJ.fb-button:focus,.ONJ.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}.ONJ.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}.ONJ.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ONJ.fb-close::after{content:'x';font-family:sans-serif}</style>
 
<div class="fb-livechat">
 <div class="ONJ fb-overlay"></div>
 <div class="fb-widget">
 <div class="ONJ fb-close"></div>
 <div class="fb-page" data-href="https://www.facebook.com/onlinejaankari/" 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/onlinejaankari/" class="fb-xfbml-parse-ignore"> </blockquote>
 </div>
 <div class="fb-credit"> 
 <a href="https://www.onlinejankari.com/facebook-messenger-chat-widget-blog/" target="_blank">Facebook Messenger Chat Widget</a>
 </div>
 <div id="fb-root"></div>
 </div>
 <a href="https://m.me/onlinejaankari" title="Send us a message on Facebook" class="ONJ 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),$(".ONJ").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>

Step 2 :

Upper diye gaye code ko aapne copy karke Notepad me jo pest kiya hai. Us code ko edit karke usme se aapko mera Facebook Page ke Username ki jagah.

Aapko Apne Facebook page ka username daalna hai. simple aap notepad me Ctrl + F key press karke fine kare onlineajaankari aur usko apne facebook page username se Relapse kar de..

Example-

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

Step 3 :

Username change karne ke baad. App us pure code ko copy kar ke. Apne WordPress ya Blogger blog ke HTML Widget me paste kar de.

Aur agar aap HTML code me add karna chahte hai. To <body> tag me bhi add kar shakte hai. widget code Paste karne ke baad Save save karna na bhule. Save karte hi aapke blog ke right down me Facebook Messenger Chat Widget add ho jayega.

.Also Read :

I hope ke aapko ye jankari pasand aayi ho. apne dosto ki help ke liye ise social media par share karna na bhule. Aur iss tarah ke interesting update ke liye humare Newsletter ko Subscribe jarur kar le. Taki aap ke email par humare new post ka notification milta rahe. Thank you.

Tags
Show More

Related Articles

3 Comments

  1. hello!,I like youyr writing very much!share wwe communicate more about your post onn AOL?

    I require an edpert on thiss house to solve my problem.
    Maybe that’s you! Having a look ahead to peer you.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close
Close

Adblock Detected

Please consider supporting us by disabling your ad blocker