Facebook recently made available in open beta their Messenger Customer Chat Plugin which allows you to integrate your Messenger experience directly into your website.

Are you interested in using a WordPress Plugin on this?

If yes, search WPMCCP at WordPress Plugins. Activate, and then follow the instructions. Watch how-to video here.

NOTE: If you use this plugin, skip the guide below and/or undo what you did as per this guide.

But how do you integrate this into your WordPress site? Of course, there will be probably a lot of plugins created by now to do that easily but why not do it yourself for such a simple thing?

Here’s how you do it in as easy as 1, 2, 3…

1.) Let’s look up your Facebook Page ID which we need in Step 2. For this, let’s use a free service at Find Your Facebook ID and paste your Facebook Page URL.

E.g.: https://www.facebook.com/pg/iamDJBot.

IMPORTANT: Take note of the number.

Alternatively, you can go to your Facebook Page > About and scroll down bottom until you see Page ID.

2.) Add your website’s domain to Whitelisted Domains on your Facebook Page. Go to your Facebook Page > Settings > Messenger Platform then scroll below and find Whitelisted Domains.

E:g: https://dorelljames.com

3.) Open your theme’s functions.php file. If you’re using a child theme, use that one (definitely better).

In WordPress sidebar menu, go to Appearance > Editor. Make sure that your active theme is selected. Then, locate the functions.php file on the right side and click that.

NOTE: Please proceed with caution with the code below and make sure to copy and paste it properly or it may break your site and you need to manually remove the faulty code to fix your WP site. Rest assured, the code below works without problems.

NOTE: If your functions.php file is empty, make sure to input the opening php tag and append the code below (few lines after).

<?php

// Insert the code here...

NOTE: If your functions.php file is not empty, make sure not to paste the code below after the closing php tag.

// Some code here...

?>

// DO NOT INSERT CODE HERE

Here’s the right way below…

<?php

// Insert the code here... This is the line after the PHP opening tag and/or before the PHP closing tag
// If you have existing code, do not clear them out but just paste it above or below but always remember insert in between the opening and closing tags

?>

You may now paste the following code below (append it to the bottom part). Make sure to replace <YOUR_FACEBOOK_PAGE_ID> from Step 1.

// Messenger Chat
if ( ! function_exists('messenger_chat') ) {
    function messenger_chat() {
        echo '<div class="fb-customerchat" page_id="<YOUR_FACEBOOK_PAGE_ID>" minimized="false"></div>';
    }
}

// FB SDK
if ( ! function_exists('fb_sdk') ) {
    function fb_sdk() {
        echo '<script>window.fbAsyncInit=function(){FB.init({appId : "1678638095724206", autoLogAppEvents : true, xfbml : true, version : "v2.11"});}; (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="https://connect.facebook.net/en_US/xfbml.customerchat.js"; fjs.parentNode.insertBefore(js, fjs);}(document, "script", "facebook-jssdk"));</script>';
    }
}

add_action('wp_footer', 'messenger_chat');
add_action('wp_footer', 'fb_sdk');

Replace “<YOUR_FACEBOOK_PAGE_ID>” with your Facebook Page ID. Save. Hooray!

54 comments

  1. Stefan November 30, 2017 at 12:59 PM

    Reply

    Hey Dorell!

    Kudos for the quick integration! Worked like a charm.
    Tried the fb guides & nothing worked until I’ve applied your method.
    Any chance of sharing some tips on how to set my own fb dev app to get insights on the usage though?

    Cheers!

  2. Jorge Gonzalez del Arco November 30, 2017 at 3:47 PM

    Reply

    Hey Dorell!

    Thanks a lot for this great post!

    I am trying to make this work, but I cannot

    My WordPress blog is:

    https://jorgegonzalez.tv

    Maybe I am doing something wrong…

    Thanks for your help!

    Jorge.

    • Dorell James Galang November 30, 2017 at 4:03 PM

      Reply

      Make sure you didn’t forget to whitelist your domain on Facebook page settings as per Step 2 and lastly in Step 3, you swap out with the actual Facebook Page ID you got from Step 1.

    • Dorell James Galang December 2, 2017 at 8:30 AM

      Reply

      Hi Jorge, did you get it working by now? I have created a WordPress plugin that might help you. No need to mess up with the functions.php file as per this blog post. Let me know if you’re interested.

  3. Jordan St Jacques November 30, 2017 at 8:06 PM

    Reply

    I see that part of the SDK process involves creating an FB App for this. What kind of App? Login App, Messenger App? Confused on this step.

    • Dorell James Galang November 30, 2017 at 9:17 PM

      Reply

      You could just actually use Chatfuel’s app if you don’t want to mess with this. The Facebook App ID is 1678638095724206. Or if you really want to do it on your own, just create a FB App > Messenger App.

  4. Zbyszek November 30, 2017 at 8:17 PM

    Reply

    It doesn’t work on my website, domain is whitelisted, code is ok, I didn’t use child theme, but I placed it in fuctions.php. Please check: https://mlodytata.pl

    • Dorell James Galang November 30, 2017 at 9:19 PM

      Reply

      Make sure you swapped out with whatever number of your Facebook Page ID. For example, it should be like below.

      NOTE: Facebook ID is represented as 1234567890.

      // Messenger Chat
      echo '<div class="fb-customerchat" page_id="1234567890" minimized="false"></div>';
      

  5. Mike Poglese November 30, 2017 at 9:22 PM

    Reply

    I keep getting an error when trying to whitelist my domain…. any ideas?

    • Dorell James Galang November 30, 2017 at 9:25 PM

      Reply

      Make sure you set the protocol like “http” or “https”. E.g. “https://dorelljames.com”. Don’t leave that out.

  6. Ahetesham Shimanta November 30, 2017 at 11:48 PM

    Reply

    Can you help?

  7. Measmony Suon December 1, 2017 at 6:55 PM

    Reply

    Great it work very well on my website: aforativemedia.com!
    One question: Could we track the chat which from website and which from facebook page?
    Thank you!

    • Dorell James Galang December 1, 2017 at 10:35 PM

      Reply

      You can a “ref” attribute on the customer chat div for this case. I am about to release a WordPress plugin to get this all done fast and quick including the answer to your question.

    • Dorell James Galang December 2, 2017 at 8:29 AM

      Reply

      I just released a WordPress plugin which allows you to customize the ref parameters. Ping me if you’re interested.

      • Measmony Suon December 5, 2017 at 2:44 PM

        Reply

        Yes! i would love to install the plug-in! Pls do let me know where i can download it

  8. Nerijus December 2, 2017 at 6:45 AM

    Reply

    Any idea how to make it work on prestashop ?

    • Dorell James Galang December 2, 2017 at 8:27 AM

      Reply

      Here’s a guide from messenger itself https://blog.messengerdevelopers.com/messenger-customer-chat-open-beta-16b11879637. Perhaps you just inject the right things in the right place. You only need two things, the FB SDK and the div element for it to hook up. Please ask me any question if you have questions.

    • Nerijus December 2, 2017 at 6:51 PM

      Reply

      Hi, Im put this code to my prestashop site https://moe.lt
      {literal}

      window.fbAsyncInit = function() {
      FB.init({
      appId : 1678638095724206,
      autoLogAppEvents : true,
      xfbml : true,
      version : ‘v2.11’
      });
      };

      (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 = “https://connect.facebook.net/en_US/sdk.js”;
      fjs.parentNode.insertBefore(js, fjs);
      }(document, ‘script’, ‘facebook-jssdk’));

      {/literal}
      ‘;

      Maybe you can say why there missing messenger icon ? And there are possible to translete “Hi! How can we hel you?”

      • Dorell James Galang December 2, 2017 at 7:27 PM

        Reply

        Hi. As far as I can tell, this is only the FB SDK which is one of the requirements to make the customer chat plugin work. You need to add the div tag and their attributes for FB SDK to lookup and display the chat plugin in an iframe. Also, remember that you need to whitelist your domain on your FB page.

      • Nerijus December 2, 2017 at 8:10 PM

        Reply

        i added ‘;
        now its look like https://pasteboard.co/GWlcVg8.png
        there are misiing https://pasteboard.co/GWldbCm.png

        • Dorell James Galang December 3, 2017 at 8:39 AM

          Reply

          Hi Nerijus, It could be either a CSS style made that messenger icon disappear or could be a script on your site. I’d take a look into that.

  9. Fan Huang December 2, 2017 at 10:11 PM

    Reply

    Hey! I came here after the messenger developers instructions didn’t work. I’ve tried both your functions.php code and the plugin, and neither work. I do have the correct Page ID and App ID also. When I previously added the fb-customer chat div to the code, the div was not visible in the live site code after I published it. It was like the div was erased. (not set to display: none)

    Mind taking a look? https://activatebiz.com/

    Thanks for making this blog by the way

    • Dorell James Galang December 3, 2017 at 8:43 AM

      Reply

      Hi Fan, I’ve taken a quick look at your site and saw you had FB SDK already on your site. Probably two FB SDK doesn’t work so you need to enable just one and disable the other one. Try to see if that works for you.

      • Fan Huang December 5, 2017 at 5:11 AM

        Reply

        Hey Dorell, I’ve actually managed to get it working. I knew that since it was WordPress, there must have been something interfering. I managed to get this plugin working (with your functions.php code), by adding a loading jquery in the header. Since then, I’ve had no issues

  10. Andreas December 3, 2017 at 4:09 AM

    Reply

    I got the message from Facebook that i can add this now to my website.
    I did it exactly like you wrote, but i do not see the messenger on website.

    • Dorell James Galang December 3, 2017 at 8:46 AM

      Reply

      May you provide more details on what you did? Did you use the plugin or followed the instructions in the post? A screenshot will help.

  11. MB December 3, 2017 at 5:25 AM

    Reply

    Hi Dorell,

    After a chat is initiated, any click on the website menu will force scroll to footer. Please advise a solution.

    Thanks, MB

    • Dorell James Galang December 3, 2017 at 8:37 AM

      Reply

      Hi MB,

      Perhaps there’s some script on your website that does that. What’s your site URL? I’ll try to take a quick look.

      Cheers,
      Dorell

  12. Luke December 4, 2017 at 6:57 PM

    Reply

    Hi Dorell,

    thank you very much for your work and for sharing!! Unfortunately I don´t get the Messenger working – neither with the manual way described an the developers page nor with your plugin. I tried it on two different installations (mallorcaphotogrphy.de/home and lps-photography.de) Do you have any ideas what´s missing?

    Cheers, Luke

    • Dorell James Galang December 4, 2017 at 8:58 PM

      Reply

      I just viewed lps-photography.de and it’s working. I can’t however view the other site. Please let me know how can I further help. Thanks

  13. Harish December 6, 2017 at 10:10 PM

    Reply

    Thanks for creating the plugin. It would be great if it could be further developed so that we could decide the location of the chat and also if we want to have it on our homepage/ specific pages/ specific posts – being able to choose by page/ post as we publish them.

    • Dorell James Galang December 6, 2017 at 11:08 PM

      Reply

      Hi Harish. Thanks for trying out my plugin. I just released my plugin at https://wordpress.org/plugins/wp-messenger-customer-chat. Yes, I have plans to improve this so in order for you to keep updated, perhaps you should switch by now and use that one. Please remove first the plugin you just downloaded and uploaded manually as I believe this will conflict with the plugin installed via WordPress Plugins directory.

      Re the location, that part yet can’t be customized. And oh, the plugin appears on all pages/posts or URL on your site. I understand, finer control would be nice. I’ll consider this adding to the plugin’s roadmap. Thank you.

  14. Kuba December 8, 2017 at 4:19 AM

    Reply

    Can we get Facebook SDK included as an option as well? Currently it won’t work unless you include it in the theme files yourself.

    • Dorell James Galang December 8, 2017 at 10:38 PM

      Reply

      Sure do. I’ve seen some other sites has their own FB SDK already in there so there’s kind of a clash between using multiple SDK’s. I’ll update my plugin to include that in the next version. Thanks for your suggestion.

  15. Michael December 11, 2017 at 7:08 PM

    Reply

    Hi there.

    How do I use this if I do not use WordPress? I use ClickFunnels.

    • Dorell James Galang December 13, 2017 at 10:16 PM

      Reply

      I’m sorry Michael but I’m afraid I can’t help you with ClickFunnels.

  16. Lam December 13, 2017 at 4:35 PM

    Reply

    Hi Dorell, Can you help me with this question. I have installed your plugin on my wordpress website. Unfortunately, I’m from Vietnam and the greeting on messenger is in English. I found out that changing from en_US to vi_VN in this :”https://connect.facebook.net/en_US/sdk.js” can solve the problem. Right now, the plugin can’t do this so I decide to add the code manually. Can I paste the code by Google tag manager of Insert Headers and Footers plugin? I try many code from some blogs but it just doesn’t work.

    • Dorell James Galang December 13, 2017 at 9:27 PM

      Reply

      Hi Lam, I am currently working on adding support on your problem on my plugin. Yes, you can use Google tag manager and insert FB SDK code in footer or header – see what works for you.

      Here’s the code you might need:

      https://pastebin.com/eVeVPMmL

      Take note to change “your-app-id” and “en_US” to your needs.

      EDIT: I just saw in your website that it’s working. I’m glad you made it work.

  17. Steffen December 24, 2017 at 7:53 PM

    Reply

    Hi Dorell,

    Merry X mas

    I have some Problems with this chat.
    If i add it in my editor like descripted above it does not work. It does not show me the chat.
    BUT if i use some of the plugins it work. The chat is show. Now i have the problem that the button is on right place ( below left ) but the Chat window it selfe is in the middle of the screen. I hope you know what i mean. Can you help me to solve this

    • Dorell James Galang December 25, 2017 at 2:08 PM

      Reply

      It’s a styling issue. I would suggest you add the following css.

      .fb_iframe_widget iframe {
      transform: none !important;
      left: inherit !important;
      }

  18. Lello D´Amore December 24, 2017 at 9:15 PM

    Reply

    Hi Dorrell, how are you?

    It’s working perfectly on my site. But I need to get 2 doubts about you!

    1) My site is in WP is running on Desktop, but the mobile version is not. I do not understand why, because the site is responsive and should work. P.S: I installed the code through a plugin called “Conversion and Remarketing Code”, which places the code individually on each page. Follow the link on my website: https://pousadasemmonteverde.com.br/

    2) My site is a tourist portal of a city here in Brazil, and within it each hotel has its individual page with all its specifications. I did a test here on a page of a hotel customer, and I tried to put his hotel chat, instead of the Portal chat site, it would be more personalized.

    I put his id number on his and APP’s page, but my chat is still appearing on my site, rather than his hotel chat. Follow the link of the hotel page inside my site: https://pousadasemmonteverde.com.br/pousada-mirante-da-colyna/

    Do you think I could do that?

    Thank you!

    • Dorell James Galang December 25, 2017 at 2:15 PM

      Reply

      Hi Lello. As I can see on #1, it works perfectly on mobile and desktop.
      On #2, you can attach different customer chat since they’re based on FB page ids. So, for different pages, use different page id’s.

  19. Wouter December 31, 2017 at 10:21 AM

    Reply

    Hi Dorell,
    where can I access the code to change the ref parameter after installing your plugin?
    Thanks
    Wouter

    • Dorell James Galang January 1, 2018 at 3:29 PM

      Reply

      The WPMCCP has an Options tab where you can configure the ref parameters per page, post, etc. If you need to override and a generic one for all, see Misc tab > Ref Global Override section.

Leave a reply

Your email address will not be published. Required fields are marked *