-->

How To Make Messanger Live Chat For Blogger

Table of Contents [Show]

BloggerByte - How to Make a Messanger Live Chat for Blogger Hello, all blogger friends, Today I will share a tutorial on how to create a  professional Fanspage Live Chat on Blogspot easily. Maybe some of the blogger users have already installed it on the blog.

This Facebook Messenger chat box plugin allows blog visitors to directly interact with you as an admin because it connects directly between the blog and the chat feature on Facebook. It is real-time, meaning that both parties can immediately reply to each other's messages without having to wait.

This widget is included in the Fanspage feature (page). So if you want to install a plugin that chats directly to Facebook Messenger then you Must have a Facebook Fanspage. All the contents of the chat will go to the Fanspage inbox, not to a personal account.

This feature is quite important for those who sell products or services online. Visitors who open the website will be able to directly contact Customer Service when they open your online shop. Very easy communication between sellers and prospective buyers.

This Messenger Live Chat can be used for both two platforms, viz. Blogger and version WordPress.

Paste the following code, and paste it before </body> tag, depending on each template used.
<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button{position:fixed;left:24px;cursor:pointer}.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="https://www.facebook.com/XXXXXXXX/" data-tabs="messages" data-width="360" data-height="400" data-small-header="true" data-hide-cover="true" data-show-facepile="false"> </div> <div class="fb-credit"> <a href="https://www.bloggerbyte.net/2019/12/how-to-make-messanger-live-chat-on-blogger.html" target="_blank">Facebook Chat Widget by Bloggerbyte.Net</a> </div> <div id="fb-root"></div> </div> <a href="https://m.me/XXXXXXXX" title="Send us a message on Facebook" class="ctrlq fb-button"></a> </div> <script src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;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),$(".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>

Note - Change the marked XXXXXXXX with your Fanspage username and see the results ...

Live Demo

Thus my article on How to Make a Messanger Live Chat For Blogger, Hopefully, the above article is useful for all my friends. thank you...

Next
Previous

Related Posts

Open Comments ( 0 )
Close Comments

0 Response to "How To Make Messanger Live Chat For Blogger"

Post a comment

  • Please leave a trace according to the article title.
  • Not allowed to promote goods or sell.
  • Do not include active links in comments.
  • Comments with active links will be automatically deleted
  • Comment well, your personality is reflected when commenting.
  • If you want to write code it must be parsed first (especially Javascript and HTML)
  • Check the Notify me box to get notification via email when someone replies to a comment.
  • Use the <i> tag and ending with </i> code to write the code. Example:
    <i>#comments</i>
  • Use the <em> tag and end with </em> code to write a longer code or URL. Example:
    <em>#comments {margin:0; padding:10px 15px}</em>

Article Top Ads

Article Center Ads 1

Article Center Ads 2

Ads Under Articles

x
Subscribe

Get notified by email every time there is a new article. Free!