Facebook introduced new Messenger widget, It allows website/blog owners to provide their users with an easy way to message/contact or ask any query through facebook page or profile. In this article, we will show you how to embed/integrate Messenger widget in your site. There are various techniques, I will explain each technique step by step.



Messenger Link

1
2
3
<a href="https://m.me/coderexample">
    Message us on Facebook
 </a>

This is the most simple method, you need to just add Messenger link in a hyperlink, make sure your have used your profile/page username with Messenger link. Clicking on the link will take you Messenger interface to message.

Messenger Box

You can also add messenger box like “facebook like box”. To generate embed code you need go Facebook Page Plugin Documentation

Then you need to add facebook javascript SDK https://developers.facebook.com/docs/reference/javascript/ in your site. you can include this before <body> tag started.

1
2
3
4
5
6
7
8
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=496223437090509";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Now you can paste below code where you want to show Messenger Box on your site.

1
2
3
4
5
<div class="fb-page" data-href="https://www.facebook.com/coderexample" data-tabs="timeline,messages" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
    <blockquote cite="https://www.facebook.com/coderexample" class="fb-xfbml-parse-ignore">
        <a href="https://www.facebook.com/coderexample">CoderExample</a>
    </blockquote>
</div>

data-tabs defined various tabs like timeline, messages or events. you can keep only one tab or use a comma-separated list to add multiple tabs, i.e. timeline, events.

Iframe Technique

If you don’t want to add facebook SDK on your site you can refer iframe technique but It’s not a good practice for a site performance.

just copy paste below iframe code where you want to show Messenger Box on your site.

Note:

To enable messaging on your Facebook page go to your Page Settings. In the row Messages check Allow people to contact my Page privately by showing the Message button (Direct Link: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).