Integrating Facebook Customer Chat into a React.js App

March 18, 2019 0 Comments

Integrating Facebook Customer Chat into a React.js App



With Facebook Customer Chat widget you’re now able to connect with your website visitors (customers) even after they left your site. How cool is that ;)

View source code at

You would start by creating a Facebook Page for your app or product, find your Page ID in About section, you will need that for the widget. Then go to Page Settings > Messenger Platform and whitelist your domain name, otherwise, the widget just won’t show up on your site after integrating it.

The widget itself can be integrated by injecting Customer Chat SDK script into your React.js app, which contains everything that Facebook JavaScript SDK has, plus a few more things to make the chat work.

Yes, a little, but nothing stops us from loading this SDK lazily, in a couple of seconds after the app was fully rendered in the browser.

For this to work, you would create a wrapper function that would allow loading Customer Chat SDK on demand as well as queuing all the API calls your app may make until the SDK is fully loaded and initialized.

The script relies on a global window.config variable containing your Facebook App ID (that was hydrated and injected into the HTML page during server-side rendering, but that’s another topic).

Now instead of calling Facebook SDK API directly, you would use this wrapper function (for the lack of a better name I called it fb in this example):

fb(FB =>;

Note that, you cannot call API methods until the SDK was fully initialized, so this wrapper function would save us from using SDK prematurely.

Now, let’s create the Customer Chat React Component itself, it would look something like this:

You would just place it into your top-level React component (e.g. Layout) and it would do the trick.

function Layout({ classes: s, children }) {
return (
<div className={s.root}>
<Toolbar />
<main className={s.content}>{children}</main>
<CutomerChat />

In one of the future articles, I will share with you a couple of code recipes for creating chatbots. Stay tuned! Check out the demo and complete example in the React Starter Kit project on GitHub. Try it out! And, I will chat with you on the other end :)

Tag cloud