javascriptreactjsfacebookchatfacebook-chat

Customer chat not working with React Messenger Customer Chat

I would like to integrate the Facebook customer chat plugin in a React web application.

App runs in development mode on the URL: http://localhost:3000/

Used npm package: react-messenger-customer-chat

Created a new Facebook App and Facebook Site with the same name, and connected them in Facebook for Developers.

Stored the App ID and the Page ID on the React side.

Added in Settings -> Basic -> App Domains: localhost (typed in "http://localhost:3000/ but was saved as "localhost"

Added a new platform -> Website: http://localhost:3000/

Whitelisted on the Messenger Platform -> Advanced Settings -> Whitelisted Domains: http://127.0.0.1:3000/, https://127.0.0.1:3000/, https://127.0.0.1:3000/, https://127.0.0.1/

Set up the React code, passed in the arguments to the new component. After reloading, I get a 200 response from Facebook but an empty div is shown in the site, and I could not manage to make it work (even tried with pure Javascript scripts or created a Test App).

Used in App.js:

import React from 'react';
import MessengerCustomerChat from 'react-messenger-customer-chat';

import { FACEBOOK_APP_ID, FACEBOOK_PAGE_ID } from '../../shared/configuration';

const Chat = (props) => (
  <div>
    <MessengerCustomerChat pageId={FACEBOOK_PAGE_ID} appId={FACEBOOK_APP_ID} />
  </div>
);

export default Chat;

Request URL:

https://www.facebook.com/v2.11/plugins/customerchat.php?app_id=<MY_APP_APP_ID>&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df197f00e47470a%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A3000%252Ff229f87298f7008%26relation%3Dparent.parent&container_width=0&locale=en_US&page_id=MY_APP_PAGE_ID>&request_time=1603379771509&sdk=joey

Response header:

alt-svc: h3-29=":443"; ma=3600,h3-27=":443"; ma=3600
cache-control: private, no-cache, no-store, must-revalidate
content-encoding: br
content-security-policy: default-src * data: blob: 'self';script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' blob: data: 'self';style-src data: blob: 'unsafe-inline' *;connect-src *.facebook.com facebook.com *.fbcdn.net *.facebook.net *.spotilocal.com:* wss://*.facebook.com:* https://fb.scanandcleanlocal.com:* attachment.fbsbx.com ws://localhost:* blob: *.cdninstagram.com 'self' chrome-extension://boadgeojelhgndaghljhdicfkmllpafd chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm;block-all-mixed-content;upgrade-insecure-requests;
content-security-policy: frame-ancestors https://www.facebook.com;
content-type: text/html; charset="utf-8"
date: Thu, 22 Oct 2020 15:16:11 GMT
expires: Sat, 01 Jan 2000 00:00:00 GMT
facebook-api-version: v8.0
pragma: no-cache
status: 200
strict-transport-security: max-age=15552000; preload
vary: Accept-Encoding
x-content-type-options: nosniff
x-fb-debug: 3hcF+KdxLlfSCdNr3qJFo24n/o8y1GyMJRbFbyeBdoZdhniyI8ummvUQAGY6KB8GAdDePynl83js0QmsH6a5xA==
x-xss-protection: 0

HTML code (first 'div' should be the 'Chat' component content, other two rows are injected by the npm package): enter image description here

What can be the solution for this issue?

Solution

  • Domain name as "localhost" is not an option when developing and testing a React application with the Facebook Chat Plugin.

    1. In the operation system hosts file have to add a new entry, for example: 127.0.0.1 react-with-chat-app.com
    2. On Windows run command prompt as administrator with ipconfig /flushdns command.
    3. Add .env file in the root of the React project, and add your new hostname: HOST=react-with-chat-app.com
    4. Add http://react-with-chat.com/ to the Facebook Site whitelist domains array, and change the Facebook App's website also to http://react-with-chat.com/.
    5. Restart React application, and access using: http://react-with-chat-app.com:3000, and test the chat functionality.