How To Add facebook Messenger Chat Widget On website

Hello Friend aapne bahut sare Blog website par Facebook messenger widget ya Live chat widget ke liye post read kari hogi. Lekin bahut kam site ke facebook messenger widget code work karte hai.

Me aapko is post main demo ke sath Facebook messenger widget ya facebook live chat widget add karne bare me bataunga. facebook live chat widget blog me traffic aur reader ke Sath live rahne ke liye sabse best way hai. Kyoki ishe ham reader ko fast reply de skate hai.

Aur Facebook Messenger widget ya live chat widget ki khas bat ye hai. is widget me aapke live chat ke doraan vistor aapke facebook page ko like bhi kar sakta hia. Aur aapke sath live bhi rah sakte hai.

Mene facebook live chat widget ke bare me pahle bhi post kari hai Lekin usme aapke page ko like nhi kar sakte hai. Aur isme bahut ache-ache feature milte hai. Aur widget bhi bahut beautiful hai.

  ⚫ 5 Stylish social Media Follow button blog ke liye.

Agar aap is facebook messenger widget ka demo dekhna chahte hai. To niche demo button par click karke Facebook messenger widget ka demo dekh sakte hai.

Facebook Messenger Widget kya hai.

Facebook aapne user ke unlimited feature deta hai. Aur blogger ke liye bhi facebook messenger widget ya live chat widget, Provide kiya hai.  Lekin ye facebook messenger widget Css devloper duwara tayar kiya gaya widget hai.  Jisme blog par ham reader ke sath live reh skate hai. Aur aapne Vistor ko fast replay de skate hia.

Jisse aapka reader ke sath bahut acha relation ban jayega. facebook meessenger widget bilkul messenger ke trah hi work karta hai. Facebook messenger widget ko blog me add karne ke bahut benifits hai.

  ⚫Blog me Youtube Subscribe widget kaise add kare

Facebook Messenger Widget Blog me Add karne ke Fayde.

1. Facebook messenger widet blog me add karne se aapke reader aapke facebook page ko like karenge.
2. Aap reader ke sath live Chat kar skate hai.
3. Reader aapke blog par jayda time rukha rahega.
4. Aapke followers increase honge.
5. Facebook like box add karne ke jarurat nhi padegi.
6. Aur bhi bahut sare fayde ho skate hai. facebook messenger widget add karne ke

to chaliye Jante hai. Blog Me Facebook messenger chat widget kaise add karen.

 

Facebook Messenger Widget Kaise Add karen Blog Me.

Facebook chat widget add karne ke liye niche diye gaye Step ko follow karen.

Step 1.
1. Sabse pahle aapne blog dashboard me layout par click karen.
2. Ab Add Gedget Par click karen.
3. Ab Aapko new window Me HTML Javascript  par click karna hai.

Step 2.

1. Ab new window me title ke niche wale box me niche diye gaye Facebook chat widget code ko paste karna hai.

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.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}.ctrlq.fb-button:focus,.ctrlq.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}.ctrlq.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}.ctrlq.fb-close{z-index:4;padding:0 6px;background:#365899;font-weight:700;font-size:11px;color:#fff;margin:8px;border-radius:3px}.ctrlq.fb-close::after{content:’x’;font-family:sans-serif}</style>
<div class=”fb-livechat”>
<div class=”ctrlq fb-overlay”></div>
<div class=”fb-widget”>
<div class=”ctrlq fb-close”></div>
<div class=”fb-page” data-href=”httpss://www.facebook.com/blognetbook/” data-tabs=”messages” data-width=”360″ data-height=”400″ data-small-header=”true” data-hide-cover=”true” data-show-facepile=”false”>
<blockquote cite=”httpss://www.messenger.com/t/wpsites.net” class=”fb-xfbml-parse-ignore”> </blockquote>
</div>
<div class=”fb-credit”>
<a href=”https://www.blognetbook.com/” target=”_blank”>Facebook Chat by BNB SITE</a>
</div>
<div id=”fb-root”></div>
</div>
<a href=”httpss://www.messenger.com/t/wpsites.net” title=”Send us a message on Facebook” class=”ctrlq fb-button”></a>
</div>
<script src=”httpss://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9″></script>
<script src=”httpss://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),$(“.ctrlq”).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 3.

1. Aur blognetbook ke jagah par fcebook page username ko enter kariye.
2. Finally Ab save button par click karke widget save jayega.

Note:- Is widget Ki script 100-150 Kb ki hai. Ho sakta hai aapke Blog Ke loading speed thodi se bad jaye. wo aap Apne hisab se arenge kar lijye.

  ⚫ Blogger Heading 5 best design blog ke liye.

Ab aapke blog me facebook messenger widget add ho jayega. bilkul jis trah blog me html code ko add karte hai. whi step follow karne hai.

Friends hamne blogger widgets ke liye aur bhi bahut sare article publish kiye hai. uske liye all blogger widget wali post ko read kar skate hai. jisme aapko ek list me all widget diye gaye hai.

Asha karta hu ab aap apne blog me Facebook messenger widget blog me add kar payenge. lekin agar aapko facebook live chat widget ko add karne me khoi problem ho to please comment karke bataye.

Aur is post other blogger aur socail media par jarur share karen.

Popular Posts:-
  ⚫ Professional Blogger Author widget blog ke liye.
  ⚫ Stylish Email Subscribe widget blog ke liye.
  ⚫ 4 Popular post widget Blog ke liye