How to Add Facebook Messenger to Your Website

Facebook Messenger has become an important tool for businesses that use Facebook’s social network. It allows you to communicate with your customers in a range of ways, and even provide customer service and support through chat. While you can do this easily through the Facebook platform or via the Messenger app for your tablet or smartphone, you can also add Facebook Messenger to your website.

Why Add Facebook Messenger To Your Website?

Before we delve into how to embed Facebook Messenger in your website, it’s important to understand why you might want to do it. Really, it’s pretty simple – it provides yet another avenue for communication via Messenger, but one that is not tied intrinsically to the social network. In other words, embedding Messenger in your website can help you reach customers who are not necessarily active on Facebook but are looking for information, answers to questions, or support on your website.

Furthermore, by embedding Messenger in your website, you can give customers the ability to message you instantly, saving them time and hassle. But, how many customers come to your website seeking information, answers to questions, or support versus going to your Facebook business page? Embedding Messenger in your website can help you cater to those customers who prefer to engage with your business on your website.

However, there is a caveat: In order to use Messenger or embed it in your website, you must have an active Facebook business page. If you do not have one, you cannot use Messenger. Therefore, it’s important to take the time to create a Facebook business page first, then activate Messenger, and finally embed your link in your website.

How to Turn Facebook Messenger On

It’s important to understand that your page must be configured to allow messages or the steps below will not work. You can access that setting by going to your Facebook business page, clicking on settings, going to messages, and allowing people to message your page privately. Save the changes when you’re done.

How to Embed Facebook Messenger

There are several ways that you can embed Messenger in your website, although all of them rely on using the Messenger code available to you through your Facebook business page. Once you have that code, you can decide what method you want to use to embed it.

It’s also important to note that embedding Messenger in your site does not necessarily mean that your customers will open a Messenger window while remaining on your website. Instead, clicking on the “message me” button will actually open the Facebook Messenger app, assuming that the customer is accessing your website via their smartphone or tablet. If they are using a laptop or a desktop, it should launch Messenger via a new tab in their web browser.

It’s also important to note that the default embedding method from Facebook is in JavaScript. If you prefer HTML, you can write the code needed to embed Messenger that way. Using your Messenger link in this way will also defeat ad blockers if your customer is using them. You’ll need to use this code:

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

You’ll just need to replace the XYZ in the code above with the vanity name of your business on Facebook. Obviously, you must have a Facebook business page to do this.

If you prefer, you can also embed a Messenger button on your website. It’s designed to look just like the button on Facebook, so there’s instant recognition. This uses JavaScript, but you cannot write it in HTML. Use the following code to embed the button and make sure to replace XYZ with your Facebook page ID.

<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="insert-app-id-here"
         page_id="XYZ"
         color="blue"
         size="large">
    </div>

Whichever method you choose, your website visitors will now be able to communicate directly with your through Messenger.This article is part of our Facebook Reviews Guide:

Facebook Business Management

FB Messenger

Facebook Reviews/Recommendations

Improve the online reputation of your business with RAY

Do you want people to speak well of your brand online? With an adequate strategy you can improve the user experience and with it, the online presence of your business.

The best: you don’t have to spend all your time on homework. You only need the right tool.