How to add Facebook Messenger to a Website
Facebook provides facebook Chat Plugin that can be used to integrate Facebook Messenger with your website.
Follow these steps to add Facebook Messenger Chat with your websites:
- Create App in Facebook Developers and setup Messenger.
- Add the following code in the head section of your html page. Use your AppId. The code below includes and initializes Facebook SDK and Chat Plugin in your website.
- Next, add the code below to display Facebook Chat Messenger in your html page. Get your page id from your facebook page and use it in the code below:
- Go to your Facebook page >> Page Settings >> Advanced Messaging and add your domains in the Whitelisted Domains field. Example: https://www.tutorialsbuddy.com
- You will not see Facebook Chat Messenger in local server. If you want to test it locally then you can use Ngrok to create a public url and add in the Whitelisted Domains field.
<script>
window.fbAsyncInit = function() {
FB.init({
appId :'paste your appId here',
autoLogAppEvents : true,
xfbml : true,
version : 'v7.0'
});
FB.CustomerChat.hideDialog();
};
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<script>
(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>
<div className="fb-customerchat"
page_id="your page id"
theme_color="blue"
height="auto"
greeting_dialog_display="fade"
logged_in_greeting="Hello! How can we help you?"
logged_out_greeting="Hello! How can we help you?">
</div>