Adding Facebook Messenger to your site [Classic]

Katherine Ramirez Updated by Katherine Ramirez

This article will show you how to add Facebook Messenger to your Placester site using the Javascript section.  Please note that this feature is currently only available on certain subscription levels. If you notice that you don’t have access to this feature and would like to learn more please visit our packages and pricing page.

Please note: We cannot guarantee Facebook Messenger will always work on your Placester site. Facebook may make updates to their Messenger plugin, leading it be incompatible with Placester sites.

 Whitelisting Your Domain Through Facebook

 First, you will need to login into your Facebook Business page to Whitelist your domain. Click “Settings” and then “Messenger Platform.”

Click_Settings.png

From here, go to the “Whitelisted Domains” section. Add the full domain of your Placester site here. Please make sure to include “https://” in your domain.

whitelist_domains.png

 

Obtaining Page ID for the Chat Plugin

 In the Messenger Platform settings, go to “Customer Chat Plugin” and click “Setup.”

Chat_plugin.png

From here, you need to get the Page ID for your Facebook Chat Plugin. Please note: The customization options and set-up code Facebook provides are not compatible on Placester, so you can skip to the end to get the Page ID within the “Code Snippet.”

 

 

Adding Facebook Messenger to Placester

Once you have the Page ID, login to your Placester account. To access the CSS/Javascript editor from your Dashboard, click on the three dots next to the upgrade your website and then click edit site from the dropdown.

This will take you to your Site Settings.  Scroll down to the Site Design section and click on “Custom CSS & JS”

Custom_CSS___JS.png

To make sure the widget is placed correctly on the page click on the gear next to Custom Javascript.  Select “Footer”.

 

In the JavaScript section, paste the following code. Within this code, you need to replace “YOUR_PAGE_ID” with the Page ID you got from Facebook.

 

(function (d, $) {

$(d).ready(function () {

var fbCustomerChat = d.createElement("div")

fbCustomerChat.setAttribute("class", "fb-customerchat");

fbCustomerChat.setAttribute("page_id", "YOUR_PAGE_ID");

console.log(fbCustomerChat);

d.getElementById("fb-root").appendChild(fbCustomerChat);

window.fbAsyncInit = function () {

FB.init({

xfbml: true,

version: 'v3.2'

});

};

(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);

}(d, 'script', 'facebook-jssdk'));

});

}(document, jQuery));


JS.gif

 

Finally, click the Green save button and you are all set!

 

Need More Help?

If you have additional questions about adding Facebook Messenger to your site, let our support team know at support@placester.com.

How did we do?

Tricks for Speeding up a Slow Website [Classic]

Adding a Chat Widget to Your Site [Classic]
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support