Today I will show you how to add Facebook Messenger (known as Customer Chat) to your website.
What to start with?
First and most important thing is SSL. Your website must have SSL installed and up and running. Otherwise Messenger won’t work.
If your website doesn’t have SSL and you are looking for one, check dhosting.com
Except that, you will need ID of your Facebook page, you can get it here
First step will be generating App ID, just as on image below
How to create own Facebook App?
Go to https://developers.facebook.com/apps , and then click „Add a New App”. Fill required fields and then click „Create App”:
In next step we go back to our App list. Go to https://developers.facebook.com/apps/ and select your App that you have just created.
Once done, go to „App Settings” and fill all required fields, once all fields are complete click ‚Save Changes’.
Display Name – your app name, should be copied from last step
Namespace – unique app name/app id
Contact Email – conatc email, should be copied from last step
App Icon – app icon – 1024px square in PNG format
Below you can find how my app was setup:
Once all previous steps are complete, now we should make our App public.
As next step, go to „App Review” and click as on below image:
Once clicked on „Yes”, there should be a popup where you can select category of your App, as example „Business and Pages”
Next step is to add our website to „Whitelist”.
To do so, go to Settings and „Messenger platform”. In section „Whitelisted Domains” add your website link, with https
On image below you can see how this should be done:
In next step, we will add code directly to your website.
If you are using WordPress, it’s best to add code to header.php
Below code we should add just before
Note, replace appId=491168991282877 with your App ID :
var js, fjs = d.getElementsByTagName(s);
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.11&appId=491168991282877";
})(document, 'script', 'facebook-jssdk');
That’s all. If you have any troubles just let us know, we will try to help 🙂