Scroll to top

How to embed Facebook Messenger on website – tutorial


Ministerstwo Internetu - 25 listopada 2017 - 0 comments

Hi,

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

Privacy Policy URL i Terms of Service URL – here you should provide link to Privacy Policy and Terms of Service of your application

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 :

<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 = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.11&appId=491168991282877";
fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'facebook-jssdk');
</script>

In next step we add code insection.

Note : page_id and ref you should replacewith your values.

<div class="fb-customerchat">
<div class="fb-customerchat"></div>
</div>

That’s all. If you have any troubles just let us know, we will try to help 🙂

[ra_button style=”btn-app” shape=”round” size=”btn-lg” i_type=”fontawesome” i_align=”right” title=”Follow us on Facebook” link=”url:https%3A%2F%2Fwww.facebook.com%2FMinisterstwoInternetu%2F||target:%20_blank|” i_icon_fontawesome=”fa fa-facebook” hbg=”#ffffff” text_color=”#3b5998″ htext_color=”#3b5998″]