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):
Scroll 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:
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.
Next step – select Messaging on the left, and scrool to Add Messenger to your website section. Click Get Started.
Now 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.
Next step – you may change the default Messenger window color to fit your website color scheme. If you need, make the change, and hit Next.
After 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.
The 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.
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):
After pasting the Messenger code and adding backslashes hit Update File button. if everything’s fine, you’ll see success message:
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:
