Millions of people use Facebook and its messenger. Facebook messenger is an easy way to chat with each other in real time. Users can directly connect to Facebook messenger via their Facebook login detail. Initially, it used to be a Facebook chat. Over the years, Facebook has launched it in various platform. It was separated from main Facebook app. As a result, we can download its smartphone versions, such as android and iPhone apps. Moreover, we can also use it through web interface since it is a standalone application.

Messenger became successful in a short period of time. Now it has 1.2 billion users. Therefore, it has been beneficial to businesses directly and indirectly. It can be embedded in a website, which enables to resolve any pre-sales issues by initiating conversation between business person and costumers.

To implement this feature in your website, you need few things:-

  1. A facebook account
  2. A facebook page with admin privilege

Well, if you want to embed Facebook messenger, then you should copy and paste a small piece of code into your website.

Please follow the below steps:

Step 01: First of all add the following CSS into your template’s css file.

.fb-livemessage .fb-section{
display: none;
}
.fb-control-button.fb-button{
z-index:1;
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
width:62px;
height:62px;
text-align:center;
bottom:24px;
border:1px solid #daedff;
border-radius:60px;
-webkit-border-radius:62px;
-moz-border-radius:62px;
-ms-border-radius:62px;
-o-border-radius:62px;
box-shadow:0 1px 3px rgba(0,0,0,.06),0 2px 26px rgba(0,0,0,.16);
-webkit-transition:box-shadow .2s ease;
background-size:90%;
transition:all .2s ease-in-out;
}
.fb-section{
background:#fff;
z-index:2;
position:fixed;
width:360px;
height:435px;
overflow:hidden;
bottom:0;
right:20px;
box-shadow:0 5px 20px rgba(0,0,0,.16);
-webkit-box-shadow:0 5px 20px rgba(0,0,0,.16);
-moz-box-shadow:0 5px 20px rgba(0,0,0,.16);
-o-box-shadow:0 5px 20px rgba(0,0,0,.16)
}
.fb-control-button.fb-button,.fb-section-close{position:fixed;right:24px;cursor:pointer}
.fb-control-button.fb-button:focus,.fb-control-button.fb-button:hover{
transform:scale(1.1);
}
.fb-section-close::after{
content:'x';
font-family:sans-serif
}
.widget-credit{
text-align:center;margin-top:8px
}
.widget-credit a{
transition:none;
color:#c4c4c4;
font-size:11px;
text-decoration:none;
font-weight:400;
}

Step 02: Now add the below html code just below <body> tag

<div class="fb-livemessage">
<div class="fb-section">
<div class="fb-control-button fb-section-close"></div>
<div class="fb-page" data-href="https://www.facebook.com/rakepoint/" data-tabs="messages" data-width="340" data-height="390" data-small-header="true" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/rakepoint/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/rakepoint/">RakePoint</a></blockquote></div>
<div class="widget-credit">
<a href="https://www.rakepoint.com">FB Widget by Rakepoint</a>
</div>
<div id="fb-root"></div>
</div>
<a href="https://m.me/rakepoint" title="Send us a message on Facebook" class="fb-control-button fb-button"></a>
</div>

Step 03: Finally, just include the below script just above </body> tag.

<script>
$(document).ready(function(){
var obj={
delay:120,
section:$(".fb-section"),
button:$(".fb-button"),
};
setTimeout(function(){
$("div.fb-livemessage").fadeIn()
},9*obj.delay),
$(".fb-control-button").on("click",function(e){
e.preventDefault(),
obj.section.is(":visible")?(t.section.fadeOut(obj.delay),
obj.section.stop().animate({
bottom:0,
opacity:0
},2*obj.delay,function(){
$(this).hide("slow"),
obj.button.show()
})):obj.button.fadeOut("medium",function(){
t.section.stop().show().animate({
bottom:"30px",
opacity:1
},2*obj.delay),obj.section.fadeIn(obj.delay)})})});
</script>

This widget supports in all sorts of website. If you want to use it in your blogger template, then it also supports in that template.

Note: Don’t forget to replace https://www.facebook.com/rakepoint/ by your facebook page url.

How to use it ?

First of all, visitor should click on the button shown right below the web page. As it is clicked, there appears a message box  of as well as facebook page info. After visitor write any text inside that box, s/he should click on send button. Then the message directly goes into the message box of particular page.

Customers must be notified via messenger apps or Facebook page inbox. The conversation will be lasted forever until it is deleted.