Step 1: To get started, go to developers.facebook.com and click the “Add a new app” button to create a new Facebook app.
Step 2: Give your app a name and click the Create button to get your own App ID. It is simple sequence of digits like 156586021709768.
Step 3: Go to your Facebook Page, click the Settings tab, choose Messenger Platform, Whitelisted domain, enter the full URL of your website and click Save. You can also enter multiple domains if you wish to embed the same widget on multiple websites.
Step 4: Go: https://findmyfbid.com/ To get the Facebook Page ID of the specific page that you wish to connect with the customer chat widget. All customer interactions will show in the inbox of this page.
Step 5: We are almost done. Open your website template/Skin/Themes and copy-paste the following code in the footer of your template. You need to replace the App_ID from Step 2 and Facebook Page_ID from Step 4.
<div class=”fb-customerchat”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘FB_APP_ID’,
autoLogAppEvents : true,
xfbml : true,
version : ‘v2.11’
});
};(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.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
Greeetings and Out-of-office Messages
With Facebook Messenger Chat, you can set a welcome greeting that will show up instantly as soon as a visitor initiates a conversation. Similarly, you can set up an away message that will be displayed when you are unable to join the live chat.
To configure these messages, go to your Facebook Page, Settings, Messaging and update the Response Assistant section.
Source: labnol