Email has forever been the preferred mode for reaching out to people on the internet. Websites would put their email addresses on web pages and made them clickable hyperlinks using the mailto protocol. Things have modified and whereas email is still thought of important, the new generation is known to like instant texting apps like Facebook messenger over email. For them, writing an email is as boring as creating a resume.

This step-by-step guide explains the varied techniques that you just will use to simply embed the Facebook messenger button in your website. once somebody clicks the message Me button, it’ll directly launch the Facebook messenger app on their mobile phone or the messenger.com website if they’re on the desktop. you’ll choose to receive messages in your Facebook profile or your Facebook page, if you’ve got one.

Embed Facebook Message Buttons in your Website

1. Simple Facebook Messenger Link

The default Facebook messenger button is rendered using JavaScript but you’ll additionally write them in pure HTML without requiring JavaScript. The advantage is that these buttons would show up although the user has enabled ad blockers and second, you’ll embed message links inside email newsletters.

All you’ve got to do is replace “XYZ” within the snippet below together with your Facebook vanity username. If you don’t have a username yet, you’ll use your numerical Facebook profile ID instead. The link is also customized with CSS to resemble a button as seen during this live demo.

 <a href="https://m.me/XYZ">
 Message us on Facebook
 </a>

Tip: If you’re not seeing messages sent to your Facebook profile, it’s as a result of Facebook automatically hides messages from people that don’t seem to be in your contacts / friends list. go to facebook.com/messages, click the “More” dropdown and opt for “Filtered” to check all messages that are not in your main inbox.

2. Facebook Messenger Button

This is the default Facebook messenger button rendered with JavaScript. not like the previous option that enables messaging to personal profile as well, this button is simply available to Facebook Page owners for them to receive messages from different Facebook users.

To get started, copy-paste the following snippet in your blog template however keep in mind to replace “XYZ” with the numeric ID of you Facebook Page. you’ll set the color as white for a blue text on white background button.

<script> 
 window.fbAsyncInit = function() {
 FB.init({
 appId : '95100348886',
 xfbml : true,
 version : 'v2.6'
 });
 };
 (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";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk')); 
 </script>
 <div class="fb-messengermessageus" 
 messenger_app_id="95100348886" 
 page_id="XYZ" 
 color="blue"
 size="large">
 </div>

Tip: If you’re unable to use the Facebook messenger button, it’s likely that your Facebook Page is configured to not receive messages. visit your Facebook Page settings, select General, Messages and turn on the option that says “Allow people to contact my Page privately by showing the Message button”.

3. Facebook Messenger Box

You have seen the Facebook Like box embedded in websites but did you recognize that the same box can also include an inline form allowing any Facebook user to contact you while not even leaving your webpage.

In this case you need to replace “XYZ” within the snippet below with the vanity username or ID of your Facebook Page. Anyone who is logged into Facebook will message you from your website itself, similar to regular contact us forms.

<script>
 window.fbAsyncInit = function() {
 FB.init({
 appId : '95100348886',
 xfbml : true,
 version : 'v2.6'
 });
 };
 (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";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>
 <div class="fb-page" 
 data-href="https://www.facebook.com/XZY/" 
 data-tabs="messages" 
 data-width="400" 
 data-height="300" 
 data-small-header="true">
 <div class="fb-xfbml-parse-ignore">
 <blockquote></blockquote>
 </div>
 </div>

You should also check the Facebook Page Plugin to learn about all the other configuration options that can be easily set using the data attributes.