Facebook Customer Chat Guide – How to Add to Your Website

Do you use chat on your website? Meet Facebook Customer Chat that enables you to embed business page chat on the website and interact with customers. Facebook’s new chat is based on its Messenger system.

Facebook Customer Chat allows your website visitors to correspond directly with your business without having to leave your website. In other words, the customer can stay on your site and correspond with you directly. The new chat is based on Facebook’s Messenger system, so all users who have Facebook can chat with you with their personal profile.

The only disadvantage of chat is that you can only chat with you if the user has a profile on Facebook. But if you have a business page on Facebook, your target audience is likely to be on Facebook, which means you can add the chat to your site.

Do not worry, this guide is very simple and no problem figuring out how to do it.

How to add a Facebook Customer Client to a website?

To add Facebook’s chat plugin to your site, you need to do a few things:

1. Adding your site a to whitelist.
2. Creating a Facebook app.
3. Copying the ID number of the business page.
4. Editing the chat plugin code.
5. Embedding the code on the site.

1. Adding your site a to whitelist

The first thing you need to do is add your site/domain to the whitelist on Facebook. Do not worry it’s not difficult. Here’s how to do this:

1. Sign in to your Facebook business page.
2. Click “Settings”.
3. Click “Messenger Platform”.
4. Add your domain and click “Save”.

2. Creating a Facebook application

In order to use chat on your site, you need to create a Facebook application (you do not need to build an application), just documentation to get the number of the application and embed it on the site.

In order to do so:

Go to Facebook for Developers, click the “Create a New App” button. Fill in the name of your app and email. Then click Create App ID.

Once clicked, you will be taken to your app page. On the app page, at the top left, you’ll see the app number next to APP ID. You will need this number for Step 4.

3. Copying the ID number of the business page

To find the ID number for your business page, do so:

1. Go to your business page.
2. Click on About.
3. Continue below until you see “Page ID”.

This number was copied for implementation in step 4.

4. Editing the chat plugin code

This is where you need to edit the plugin code and then embed it into your website. The first thing is to edit the following code:

First copy the code, then edit the code. What should I do with this code?

1. Line 4 in the code – instead of the word YOUR-APP-ID, enter the app ID you created in step 2.
2. Line 14 in the code – instead of the word en_US, you change it to another language you want.
3. Line 19 in the code – instead of the word YOUR-PAGE-ID, enter the page ID that you received in step 3.
4. Line 20 in the code (Optional) – By default, a greeting message is displayed on a desktop computer and a minimized on a mobile device. To minimize a desktop, instead of the word false, change to true.
5. Line 21 in the code (Optional) – By default, the chat will be shown in the color of Messenger, you can change color based on HEX. For example, for black color, change to #000000.
6. Line 22 in the code (Optional) – Here you can change a greeting message for users connected to Facebook
7. Line 23 in the code (Optional) – Here you can change a greeting message for users not connected to Facebook

Note: You must enter the page ID and the application ID – otherwise the chat will not work on your site.

Optional fields that you have not changed, should be deleted from the code.

5. Embedding the code on the site

Now copy the code, after you have already changed everything you wanted to change (the page ID and the number of the application) and embed it on your website.

Google Tag Manager

If you’re using GTM, you must first edit the code and add the tag <div></div> instead of  ADD-HERE-DIV-CODE and all the following code must be entered between <script> tags

jQuery('body').append('ADD-HERE-DIV-CODE');

After it:

1. Create a new Custom HTML tag.
2. Paste the code there and click Save.
3. In the Trigger select All Pages (or other pages you want).
4. Publish the tag.

Direct embedding in the site

You need to edit the code of the site and embed in the <head> the code you edited. To do this, talk to your programmer.

If you have a WordPress site, you can enter the code by editing the theme or through the theme settings if this option is available or by using a plugin.

Conclusion

That’s all, chat needs to appear on your website when browsing from both a regular computer and mobile devices.