_{By James Dickinson}

You may have seen other websites integrating the Facebook Messenger App as a means of communicating with their customers live while they scour their website. Many people struggle with how to add Facebook Messenger to their websites and so we would like to help by providing the steps we used to get the Live Chat App on our website.

It is a great free tool and is not as complicated to integrate as you might think. We have compiled all the necessary steps to implement the popular messaging app and hope it helps your business to become a bit more efficient and your site a bit more modern.

Before we begin it does pay to have a grasp on where you would like the app to appear. The app is a pop-up window that anchors itself to the bottom of the screen usually in the bottom right corner. Common pages for Messenger to appear tend to be high traffic zones including Contact and Landing pages.

You will need access to the HTML code that the webpage is constructed from to complete the following steps.

Step 1.

Decide which webpage to add Facebook Messenger to?

The following snippet of code can also be found in your business Facebook account under

Settings > Messaging > “Add Messenger to your website” > Click Get Started.

First, we will paste this code into the bottom of the webpage, just above the closing </body> tag.

   <script>

           window.fbAsyncInit = function () {

            FB.init({

                xfbml: true,

                version: ‘v9.0’

            });

        };

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

    <!– Your Chat Plugin code –>

    <div class=”fb-customerchat”

           attribution=”setup_tool”

         page_id=“<<YOUR PAGE ID HERE>>”

         theme_color=”#0387D0″>

    </div>

The script is what will run once the page is initialized and will call Facebooks APIs and return the Messenger App.

Step 2.

Your Facebook ID

If you just copied the code above, then you will need to locate your Business Facebook Page ID which will replace <<YOUR PAGE ID HERE>> in the code above.

If you acquired the code above from Facebook then you will not need to do this step as Facebook adds your Page ID automatically to the code (Continue to step 4).

If you do not know where to find your Facebook ID that is ok, we can walk through that together.

• First, open and log into your Business Facebook account that you would like the Messenger app to communicate with.
• Second, click on the “About” section of the Company.
• Finally, scroll to the bottom and locate the Page ID.

Step 3.

Entering your Facebook ID

Replace the <<YOUR PAGE ID HERE>> with the Page ID located in step 2.

Step 4.

Whitelist your website

Facebook will not display the messenger app on a webpage that you have not whitelisted explicitly as a security measure.

Firstly, in Facebook – login to your business page and locate “Settings” from your Business Page.

Secondly, on the left locate either “Messenger Platform” in the old Facebook layout or “Advanced Messaging” in the new Facebook layout.

Finally, in the section entitled “Whitelisted Domains” enter your website’s Domain name i.e. Our site would be https://processit.co.nz. Additionally, you can also enter any other websites that you intend to have this messenger feature added to in the future.

Step 5.

Upload/Save your HTML code

Once your HTML webpage is saved with the new code snippet above and re-uploaded to the server you are complete. You can test your messenger app from your webpage!

Step 6.

Debugging

It won’t display on my localhost?

Sorry Devs but the messenger app will not be able to be seen while developing on a local host. This is also true even if you try and whitelist the localhost site. Because of this, the only way to test your code is to publish it and see for yourself. You could always post it to a page URL that no one will be able to get to while you test it.

Still cannot see the Live Chat App appear on your webpage?

Right-click on your webpage and inspect the page code. Under the Console Tab in Google Chrome and Firefox, you may notice error messages appearing. This may help you to find the root cause.

The error message that commonly appears is the “Refused to display *** in a frame because an ancestor violates the following Content Security Policy directive: ***”error. For this error check that you have correctly whitelisted the domain name within Facebook.

Ensure you have a link to the JavaScript library. This may sound simple to some, but it can be easily overlooked. For this ensure you have code similar to this in your head section of the page you are adding the Messenger App to.

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js”></script>

Step 7.

Location, Location, Location

But that’s not where I wanted the Messenger App to be located!

By default, the app is positioned in the bottom right of the screen, but it doesn’t have to be.

Position Messenger App bottom left:

If you want the Facebook Messenger pop-up to be located in the bottom left, then we simply need to add some CSS. Because the div that houses the app has an Id that changes whenever you reload the page we will simply aim for the class and subsequent iframe.

Here is some code I threw together for his purpose. Add this code above the script section from Step 1.

   <style>       

       /*moves the Icon*/

        div.fb_dialog_content > iframe {

            left:0px;

        }

        /*moves the Messenger app*/

        span > iframe {

            left: 0px;

        }

    </style>

Advanced Features

There are many features that you can now take advantage of from within Facebooks settings to add some customization to your new website asset.

If we go back to our Facebook Business Pages Settings, we can Click on “Messaging” and locate under “General Settings” à “Go to Automated Responses”.

From here you can add Instant Replies to messages, ask questions to your website users, show contact information, and much more.

That’s how to add Facebook Messenger to your Website

This is where I leave you to explore. Hope this helps. That’s how you add Facebook Messenger to your website.

Regards,
    James Dickinson and Brian Henderson.

ProcessIT Limited
    Phone:   06 876 0312
    web:     www.ProcessIT.co.nz