Add Facebook Customer Chat Plugin to an Angular App

Facebook has a customer chat widget to assist businesses to engage with customers. With over 2 Billion users, Majority of your customer, if not all, are somehow on Facebook. If you are looking for a free customer chap widget for your website, then Facebook is a very good option.

It is very easy to use, and all messages come to your Facebook page inbox. And since Facebook has apps for almost all devices out there, then you can reply to your customers from anywhere you are. Very handy for small business. You can learn more about this plugin here.

Add Facebook Customer Chat Plugin to an Angular App

Add Facebook Customer Chat Plugin to an Angular App

Whitelist the Domain of your Website(s)

The first step we are going to take is to whitelist the domain of your website so as the plugin can be rendered on your webpage. To do this head over to your Facebook page, and then follow the steps below:

  1. Click Settings at the top of your Page
  2. Click Messenger Platform on the left
  3. Edit whitelisted domains for your page in the Whitelisted Domains section

Integrate with your Angular App

To add it to your Angular app, you need the Facebook JavaScript SDK, which you can find here. The quickest way to do this to include into your index.html file as shown below:

<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>

Note:  Add it just before closing the body tag so that it doesn’t affect the loading speeds of your app.

Assuming you have successfully added the snippets to your app index.html, you need an Angular Module to initialize the Customer Chat Plugin and Render it in your browser. For this, I am using ngx-facebook. It offers a lot of functionality out of the box, which you can learn more about here.

Install ngx-facebook using npm or yarn as shown below:

npm i --save ngx-facebook
or
yarn add ngx-facebook

And then import it into your AppModule as illustrated below:

import { FacebookModule } from 'ngx-facebook';

@NgModule({
  ...
  imports: [
    FacebookModule.forRoot()
  ],
  ...
})
export class AppModule { }

Assuming you have installed and imported the Angular Module successfully, then all that is remaining is adding the plugin to your component pages you want it to appear. I suggest adding it to the root component of your app if you wish it to be rendered in all pages of your application. In your component html file, add the following snippet from Facebook:

<div class="fb-customerchat"
 page_id="<PAGE_ID>"
 ref="<OPTIONAL_WEBHOOK_PARAM>"
 theme_color="<HEX_COLOR_CODE>"
 logged_in_greeting="<GREETING_MESSAGE_FOR_LOGGED_IN_USERS>"
 logged_out_greeting="<GREETING_MESSAGE_FOR_LOGGED_OUT_USERS>">
</div>

Make sure to replace all variables inside angle brackets (including the angle brackets) with variables specific to your app. And finally, initialize the component inside your component class constructor or initializer as shown below:

First, import FacebookService and InitParams from ngx-facebook:

import { FacebookService, InitParams } from "ngx-facebook";

And then, inject it to your component and initialize the Facebook customer chat plugin

constructor(private fb: FacebookService) {
    let initParams: InitParams = {
      xfbml: true,
      version: "v2.8"
    };

    fb.init(initParams);
}

Note: If you are having trouble finding the page id of your Facebook page, you can use the following link.

9 Replies to “Add Facebook Customer Chat Plugin to an Angular App”

  1. Hey, firstly, thanks for sharing…
    I had an issue trying to integrate this. Right now, I am trying to run this in local (localhost:4200) but there is an error: “Refused to display *** in a frame because an ancestor violates the following Content Security Policy directive: ***”.

    I think this is because of the whitelist. Do we need to do an additional step/configuration to be able to run this on local?

    Thanks, in advance.

          1. No dude, even I deployed it (with the domain added in the whitelist) and same error.
            I will try to do it again, maybe I did something wrong in the process.

            Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.