Add facebook messenger to website

Before you can add Facebook Messenger to your website, make sure that you have a Facebook page created. This is a pre requisite to ad Facebook messenger to your website.


Steps to add Facebook messenger to any website.

  1. Make sure you have a Facebook page created.
  2. Go to and choose a facebook page.How to add facebook messenger to any Wordpress website 1
  3. Enter your website domain.
  4. Setup the welcome message.
  5. Set up FAQs if needed.
  6. Customize your chat plugin.
    1. Set up greeting message.
    2. Set up a custom color if needed.
    3. Choose alignment.
    4. Set bottom spacing for mobile and desktop.
    5. Set if you want to make your Chat box automatically expand.
  7. Go to set up
    1. Set the language
    2. Add domains if needed.
    3. Copy code.
    4. Paste it to you website. (you can use google tag manager if you have it installed on your website). The code looks similar to the below displayed code. you can replace page_id with your own page id.
<!-- Messenger Chat Plugin Code -->
    <div id="fb-root"></div>

    <!-- Your Chat Plugin code -->
    <div id="fb-customer-chat" class="fb-customerchat">

      var chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", "273847629459179");
      chatbox.setAttribute("attribution", "biz_inbox");
      window.fbAsyncInit = function() {
          xfbml            : true,
          version          : 'v10.0'

      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); = id;
        js.src = '';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

That’s it, you have now added facebook messenger to your website.

how to add facebook messenger to your website

By Muthali Ganesh

I am an engineer wih a masters in business administration from Chennai, India. I love discovering and sharing hacks.