How to add Facebook chat in Website

Adding facebook chat facilities to your website can increase the chance of getting genuine potential buyers, where you will able to check profile of every query sender.

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.

Facebook Chat can 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.

<a href="https://m.me/your-facebook-id"><img src="image.png" /></a>

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>
<script>
window.fbAsyncInit = function() {
FB.init({
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); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="180646XXXX0021">
</div>

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"
attribution=setup_tool
page_id="180646XXXX500021"
theme_color="#C80505"
logged_in_greeting="Welcome to WebTrainingRoom! How can i help you today?"
logged_out_greeting="Thanks for visiting WebTrainingRoom" >
</div>

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