How to Create Messenger Live Chat Popup Button for Blogger

Copy

Hello friends, let's see how to add the Messenger Live chat button to your blogger website. This Messenger Live Chat script gives a professional look to your blogger's website. This script will be very helpful to design your website. This script looks amazing and looks like a professional website. If you want to add this script to your website follow this blog.

What is Massager?

Facebook Messenger is an American news application and site that was first created in 2008 as Facebook Chat. The company updated its news service in 2010, then released the complete iOS and Android apps in August 2011 and released the complete Facebook portal based on the Messenger Q4 2018.

Call. Since then, Facebook has introduced a dedicated web interface (Messenger.com) that separates the messaging function from the main Facebook application and allows users to use the web interface or download one of the complete applications.

In April 2020, Facebook officially released Messenger for Desktop, which is supported on Windows 10 and macOS and distributed on the Microsoft Store and App Store, respectively.

This service also supports voice and video calling. Complete applications support the use of multiple accounts, playing conversations and games with custom end-to-end encryption.

How to Work Messenger Live Chat Script?

This script helps to show Facebook Messenger chat from on your Blogger Website. User Can Click the Messenger floating button on the Homepage. next, open a new window on your website this is a Messager chatting form. user can chat live with you.

This Messenger Live Chat button works on both platforms like Blogger and WordPress. so you want to add this Messenger Live Chat button to your blogger and WordPress site just follow the simple step and add this button to your site. first Click the Download Button and Download All files on Your Device.

Download

How to add Messenger Live Chat Popup for Blogger Step by step

Step 1: Open your Blogger Account

Step 2: Go to "theme Section"

Step 3: Click "Edit HTML" On Dropdown Menu

Step 4: Click Ctrl+F Key and Find the </body> tag

Step 5: Copy The Downloaded Messenger Script on your Clipboard

<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://pixabin.com/how-to-make-messager-live-chat-popup-button-for-blogger" target="_blank">Facebook Chat Widget by Pixabin.com</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>

Step 6: Paste the copied script above the </body>tag

Step 7: Save all Changes

Step 8: Your Messenger Live Chat Popup Ready to Use.

Custom Modification:

Change the marked XXXXXXXX Tags with your page username and You can see the results

Final Words

I hope this Article ( Messenger Live Chat Popup Button for Blogger ) is helping to Design your Blogger Website. one More Thing Do not Share This Article and Keep Supporting On our Blog Pixabin.com.

Pixabin Official