How to Add Facebook Messenger to Your Website

Want to see the impact of Podium on your business? Start a free 14-day trial today.

Try Podium for Free

Facebook Reviews

Get started now

How to

Start your 14-day free trial with Podium today. No credit card required.

Ready to grow?

Grow your business with Podium

<p>Facebook Messenger has become an important tool for businesses that use Facebook’s social network. It allows you to <a href="https://www.podium.com/article/conversational-commerce/">communicate with your customers in a range of ways</a>, 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.</p>
<h2>Why Add Facebook Messenger To Your Website?</h2>
<p>Before we delve into how to do it, it’s important to understand why you might want to embed Facebook Messenger in your website. 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. How many customers come to your website seeking information, answers to questions, or support versus going to your Facebook business page? You can give them the ability to message you instantly by embedding Messenger right there, saving them time and hassle.</p>
<p>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, you cannot use Messenger. If you don’t yet have a Facebook business page, take the time to make one first, then activate Messenger, then embed your link in your website.</p>
<h2>How to Turn Facebook Messenger On</h2>
<p>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.</p>
<h2>How to Embed Facebook Messenger</h2>
<p>There are several ways that you can embed Facebook 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.</p>
<p>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.</p>
<p>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:</p>
<pre>&lt;a href="https://m.me/<strong>XYZ</strong>"&gt;
Message Us on Facebook
&lt;/a&gt;</pre>
<p>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.</p>
<p>If you prefer, you can also embed a Facebook 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.</p>
<pre>&lt;script&gt;     
      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'));     
    &lt;/script&gt;
    &lt;div class="fb-messengermessageus"
         messenger_app_id="<strong>insert-app-id-here</strong>"
         page_id="<strong>XYZ</strong>"
         color="blue"
         size="large"&gt;
    &lt;/div&gt;</pre>
<p>Whichever method you choose, your website visitors will now be able to communicate directly with your through Messenger.</p>


General

<p>Facebook Messenger has become an important tool for businesses that use Facebook’s social network. It allows you to <a href="https://www.podium.com/article/conversational-commerce/" class="text-rust-300" style="color: #af4e30;">communicate with your customers in a range of ways</a>, 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.</p>
<h2 id="why-add-facebook-messenger-to-your-website">Why Add Facebook Messenger To Your Website?</h2>
<p>Before we delve into how to do it, it’s important to understand why you might want to embed Facebook Messenger in your website. 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. How many customers come to your website seeking information, answers to questions, or support versus going to your Facebook business page? You can give them the ability to message you instantly by embedding Messenger right there, saving them time and hassle.</p>
<p>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, you cannot use Messenger. If you don’t yet have a Facebook business page, take the time to make one first, then activate Messenger, then embed your link in your website.</p>
<h2 id="how-to-turn-facebook-messenger-on">How to Turn Facebook Messenger On</h2>
<p>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.</p>
<h2 id="how-to-embed-facebook-messenger">How to Embed Facebook Messenger</h2>
<p>There are several ways that you can embed Facebook 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.</p>
<p>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.</p>
<p>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:</p>
<pre>&lt;a href="https://m.me/<strong>XYZ</strong>"&gt;
Message Us on Facebook
&lt;/a&gt;</pre>
<p>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.</p>
<p>If you prefer, you can also embed a Facebook 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.</p>
<pre>&lt;script&gt;     
      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'));     
    &lt;/script&gt;
    &lt;div class="fb-messengermessageus"
         messenger_app_id="<strong>insert-app-id-here</strong>"
         page_id="<strong>XYZ</strong>"
         color="blue"
         size="large"&gt;
    &lt;/div&gt;</pre>
<p>Whichever method you choose, your website visitors will now be able to communicate directly with your through Messenger.</p>
