Free Web Development Online Tutorials, Learn to Code
Online Training for MVC Web Designing Development, MS SQL, Digital Marketing

How to add Facebook chat in Website

add Facebook chat in Website

Did you know that you can easily add Facebook chat in your website? Yes, Facebook Messenger provides easy to embed a live customer chat widget for your site!

Why to add Facebook Chat Messenger’s on Your Website?
This is one of the most efficient ways to prompt potential buyer to live chat with you, a small floating live chat icon appears at the bottom-right corner of your webpage, which is decent enough to draw visitors attention.

Improve your customer service
According to customer behaviour study, 70% of people are more likely to buy service, products from a business where they can interact directly through messaging system, this really boost up their confidence and influence in decision making.

Add this one line code in your webpage, it can help improving customer experience
<a href=""><img src="image.png" /></a>
add Facebook chat in Website

How to get the facebook chat code
You need to have a facebook page, if you don’t have, then create one like this!
When you login as Page Admin, the Messenger Platform also provides an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:

  • Go to Page Settings => Messenger Platform
  • In the 'Customer Chat Plugin' section, then click the 'Set Up' Button.

The setup tool provides a simple UI for customizing the greeting message, displayed response time, theme color and setting the whitelisted domains for the plugin etc, you can use the same plugin keys for multiple domains.

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
window.fbAsyncInit = function() {
xfbml : true,
version : 'v3.3'
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = '';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//Now design your chat container appearance
<!-- Your customer chat code -->
<div class="fb-customerchat"

Note: If you are not finding the Facebook Messenger button, check if your Facebook Page is configured to not receive messages, in that case you need to check facebook Page settings => choose General, then Messages and turn on the option that says “Allow people to contact my Page privately by showing the Message button”.

Customize the chat plugin matching with your website
There are many additional attributes for designing your facebook chat box, matching with your webpage background colour theme etc. For example we have changed the theme color by setting theme_color="#C80505"

<div class="fb-customerchat"
logged_in_greeting="How can i help you today?"
logged_out_greeting="Welcome to WebTrainingRoom" >

Here are complete list of attributes for customer chat plug-in reference


Implement Facebook Chat Code in your Website

Useful Digital Marketing Knowledge Base
You may also read
How to Check Website Traffic and Optimize Website
How to Check Website Traffic Performance Tips Performance Tips
NUnit Testing C# Tutorial
NUnit Testing Tutorial C#