Add Facebook chat in WordPress Add Facebook chat in WordPress

How to Add Facebook Chat in a WordPress Website?

Share this post

Last Updated on by Azib Yaqoob

Do you want to add Facebook chat to your WordPress website? Here is a step by step tutorial which anyone can follow to add Facebook chat on a WordPress website.

If your business relies heavily on chatting with new and existing customers, I think you will love this Facebook chat integration. It will give your audience an easy way to ask questions or get quotes for your services. Both your customers and you can communicate through mobile and desktop computers by using Facebook messenger website/app.

If you’re having trouble optimizing your WordPress website then check out my WordPress SEO guide for beginners.

Benefits of Using Facebook Chat on Your Website

  • You will get instant notification on your mobile or desktop when someone initiate a chat
  • You can reply your customers in real time instantly
  • It will save chat history between customers and you. You both can continue this conversation at some point in future

How to Add Facebook Chat to a WordPress Website

Here’s what you need to do:

Note: In order to create this Facebook chat experience, you must have a Facebook user account and a facebook page.

Facebook page settings Facebook page settings

Step 1: Go to your Facebook page and click on the ‘Settings’. Find and click on the button which says ‘Messenger Platform’ in the left sidebar menu.

Whitelisted domains Whitelisted domains

Step 2: Scroll down this page and you will find an option ‘whitelisted domains’. You need to add your website domain name and Press the ‘save’ button.

Customer chat plugin button Customer chat plugin button

Step 3: On the same page when you scroll down further you will find ‘Customer Chat Plugin’ section. Click on the ‘Set Up’ Button.

Set up Customer Chat Set up Customer Chat

Step 4: It will ask you to set a greeting message. This message will show up whenever a customer will click on the Messenger button on your website. Click on the ‘Change’ button to set a custom message or let it be. It’s totally your call.

Response time Facebook Response time Facebook

Step 5: Configure a response time. You can also modify your messenger button color by clicking ‘Custom Colors’ to ‘On’. You can add any Hexadecimal color code here.

Add code in HTML head in WordPress Add code in HTML head in WordPress

Step 6: Copy this code. Login to your WordPress website and add that code to HTML Head section. If you have no idea where this section is located, then you can install Head & Footer Code plugin and add your code.

How to customize the Facebook chat Output

Note: A bit of CSS and HTML know-how is needed to perform these steps

In case, you want to improve chat box appearance, you can edit the code provided by Facebook.

To hide the greeting message, you can add this code to div class="customer-chat":


Similarly, you can delay the chat greeting dialog load after a certain number of seconds. You need to add this piece of code to div class="customer-chat":


Change the number of seconds as you like.

Let me know in the comments if you face any trouble. If you are interested to get more leads through Facebook advertising, then also check out this post on how to set up Facebook retargeting ads. Also, check out this post to troubleshoot Facebook Pixel errors.

Share this post

Related Posts

Leave a Reply

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