How to add Facebook Messenger chat to WordPress website

If you were looking for ways to integrate live chat app to your website couple years ago, then you probably needed to install a large and complicated plugin or even a dedicated application that would be a headache to use.

Now there’s a smart alternative to live chat applications – you can integrate Facebook Messenger to your WordPress site. And you can do it yourself in less than 5 minutes!

There’s one requirement though. In order to have a Facebook Messenger chat in your website, you need to have some kind of Facebook page. Why? Because most common usage of a chat in website is to make customers communicate with your business easier. So you probably already have a Facebook page for your business anyway.

How to integrate Messenger chat to WordPress site

First step – prepare your WordPress website

First thing you need if you want to add Messenger chat to your site, is go to Appearance >> Theme Editor, and open theme functions file – functions.php. Here’s the example what you’ll see (it might vary depending on the WordPress theme you use):

wordpress add messenger chatScroll to the bottom of the file, and add this code at the end of the file:

function fb_chat_code() {

}
add_action('wp_body_open', 'fb_chat_code');

Then click Update file so it should look like this:

add facebook chat to wordpress website

Second step – generate Messenger chat code in Facebook

Go to the Facebook website, and open your Facebook page – the one which you’ll want to associate your website with. If you’re set as the page administrator, you’ll see a administration menu on the left. Hit Settings.

facebook page chat to wordpress siteNext step – select Messaging on the left, and scrool to Add Messenger to your website section. Click Get Started.

facebook messenger settingsNow you’ll see a wizard which will guide you through Messenger chat settings. You may choose the messenger language, change the Greeting message, allow or disallow Guest Chat. When you’re done, click Next.

facebook messerger for wordpressNext step – you may change the default Messenger window color to fit your website color scheme. If you need, make the change, and hit Next.

wordpress facebook messengerAfter doing that enter your website URL address (including http… ) at the top left of the window. This will allow using Messenger only on your specified website, so no one could copy and use the same code on other sites. Hit Save.

facebook chat in wordpressThe final step – click on code snippet window on the right, and copy the Messenger code. You’ll need to add it to your WordPress website. Then hit Finish.

facebook messenger chat add to wordpress

Third and the last step – add Messenger chat code to WordPress

Now you’ll need to get back to your WordPress website. Click Appearance >> Theme Editor, and open functions.php file again. Scroll to the bottom of the file where you previously added a function, and make this change:

function fb_chat_code() {
    echo " PUT MESSENGER CODE BETWEEN THESE DOUBLEQUOTES ";
}
add_action('wp_body_open', 'fb_chat_code');

Since we use doublequotes in our function (“), and Messenger code also uses doublequotes, we need to add backslash ( \ ) between every doublequote in the Messenger code (6 places).

Here how the final code should look like (all 6 backslashes are marked green in the example):

add facebook messenger chat to wordpressAfter pasting the Messenger code and adding backslashes hit Update File button. if everything’s fine, you’ll see success message:

edit functions.php file in wordpress

Final result

If all the steps were completed successfully, Messenger chat will appear on every single page of your WordPress website. Here’s the example how it would look like on this website:

add facebook messenger chat to wordpress without plugins