How To Add Facebook Chat Messenger To Your Website

In this post I will show you how to add Facebook chat messenger to your website. You can see the final result at the bottom of the post or go to Netcrumb’s page or blog .

The chat can be added no matter if you have a static website with css and html files or a WordPress one.

I’ve discovered this useful tool, that can increase your number of customers, a few days ago, and I’ve installed it on Netcrumb, on both the blog and the main website.

I was using Kayako before, but that is a paid tool and Facebook chat messenger is free.

There are other solutions like Intercom or Drift, but if you’re just starting out with your business, why pay for a live chat functionality on your website.

Why you should install it?

Any customer can contact you in real-time and you don’t even need to be on the website. Your mobile device is enough.

You can use Facebook Pages Manager app available on both iOS and Android

What I’ve noticed is that the Facebook Pages Manager app doesn’t always send you a push notification if you receive a message from someone and this can affect your answering times ( you know that message which Facebook it is showing when someone wants to contact a business page – “this page is usually responding in..” )

How hard is to add this chat?

It’s very easy and any person with zero experience in creating websites or programming should be able to do it.

Let me tell you first about the things that you need and then I will tell you how to do it.

You need:

  1. A Facebook Business Page
  2. Access to your website Control Panel File Manager or WordPress Dashboard

I won’t get into details about how you can create a Facebook Business Page as I assume that anyone who reads this article has one.

From your Facebook Business page you need to do only one thing

  1. You have to do a simple customisation and Facebook will generate a piece of code

To generate the piece of code go to your Facebook Business Page Settings -> Messenger Platform -> search for Customer Chat Plugin.

Facebook settings for chat messenger

Facebook settings for chat messenger

Click on Set Up.

Now a dialog box will appear.

Facebook settings for chat messenger

On the first step you can change the greeting. If you want to do it just click on change.

Facebook settings for chat messenger

Click Next and now you can customise response time and also colors. I would suggest to leave the automatic response time and to leave the color of the widget as it is, but it’s your choice.

Facebook settings for chat messenger

On the last part, in the left, please don’t forget to whitelist your domain name by adding it as you can see in the left part: example: https://netcrumb.com . After you add it just click on Save and from the right part click on Copy Code to Clipboard ( Text will appear if you go with the mouse above the code ).

It was very easy, no? Now you need to add it to your website.

Install Facebook Live Chat On A Static Website ( CSS and HTML )

Open your website hosting Control Panel. It usually can be found at website/cpanel .

The user and the password are usually given by email when you buy the hosting.

Open File Manager and search for your website folder. Open the folder and you will find a index.html.

Click to edit the file and just before the closing tag </body> paste the code.

Take care not delete anything and just add the code.

Save the changes and your Facebook live chat should be visible on your website. Congratulations!

Install Facebook Live Chat On A WordPress Website

I think the easiest solution for this would be to search for a plugin, but to be honest I’ve tried it and they all come with all kind of ads. For example, I’ve added one that was advertising their company.

I told myself that I have to install it on my own and let’s see how you can do it.

Go to your website WordPress dashboard. Click on Appearance -> Editor

Select your theme and then Select from the right Theme Footer ( footer.php )

Paste the code right before the closing </body> . Take care not to delete anything and just add the code.

Click on update file and if you’ve done it right then you should see the Facebook live chat widget on your WordPress website. Congratulations!

And this is how you install the Facebook live chat on your website.

The widget has a few functionalities by default, like being aligned to the bottom right part of your website or the message on it “Hi! How can I help”, but this can be changed.

how to add facebook chat messenger to your website

You can also open the widget by default or you can set a personalized message once the user opens the widget to send your page a message.

Now that you’ve learned how to install the Facebook live chat messenger, you can tell me in the comments how useful it is for your business or where can I see it.

Share this: