Installing the plugin
There is a technical way which gives more customisation options but is more complex and there is a quicker, easier waywhich provides you with a working chat window in just a few eas steps.
The steps for installing the Facebook Messenger chat functionality on your website are as follows:
Step 1 – On your Facebook Page click “settings” then “Messenger Platform” then “Whitelisted Domains” add in the URL of the website that will feature the chat window E.G. This must be an HTTPS:// (secure) domain.
Step 2 – Add the Facebook SDK (development kit) to your website by inserting some code to every page that you wish to use the chat window on. There are .
Step 3 – Add code for the chat window itself to the page where you want the chat window to appear. There are various ways you can customise the code to change the way the chat window appears and behaves. If you are technically minded you can .
Using a WordPress Plugin
There are a couple of WordPress plugins that will do some of the technical work for you. The steps that you still need to follow are more straightforward to complete than above:
Step 1 – As with the above method start on your Facebook Page click “settings” then “Messenger Platform” then “Whitelisted Domains” add in the URL of the website that will feature the chat window E.G. This must be an HTTPS:// (secure) domain.
Step 2 – Install the WordPress plugin by logging in to WordPress then choosing “plugins” then “add new”. The plugin that we used is called and it is by Sam Carlton
Step 3 – Configure the plugin settings.
The plugin settings are very straightforward to complete. Firstyou need to enter the numerical ID of your Facebook page. If you don’t know the numerical ID but you know the Facebook Page URL you can use this .
The second part of the settings involves creating a Facebook App. This is actually quite straightforward and there is a helpful link within the settings page that will take you to the Facebook Developers site (you need to be logged in to Facebook to access it).
Once here, you need to:
Add a new App
Name it and click “Create new App ID”
On the next screen copy the APP ID from the top left-hand corner
Paste the App ID into the WordPress plugin settings box:
Then you can choose whether you want the chat window to start open or minimised and select your language.
Save the settings and that is it done!
When you visit your“chat now” buttonyou should now see the chat window available. have to log in using their Facebook credentials when they click the
The Chat Experience
From the website visitor’s point of view they see the chat box on your website:
From the Facebook Page’s point of view the chat appears just as any other Facebook Chat in Messenger (the desktop version is shown):
- If you use the WordPress plugin to add the Facebook Chat to your website it is really quite straightforward to get it working.
- The chat experience for the website user is exactly as it is on Facebook Messenger only with some basic functionality and minimal emojis etc.
- The experience for the Facebook page owner is just like having any other Messenger conversation and they can send emojis, attachments, links etc very easily.
Let us know in the comments