React component for Messenger customer chat plugin
Whitelist your domain to connect your Facebook Page to your website via the Facebook tool.
- From UI: Facebook Page Settings > Messenger Platform > Whitelisted Domains
- From API: Use HTTP API or API client likes messaging-api-messenger
$ npm install react-messenger-customer-chatimport React from 'react';
import ReactDOM from 'react-dom';
import MessengerCustomerChat from 'react-messenger-customer-chat';
ReactDOM.render(
<MessengerCustomerChat
pageId="<PAGE_ID>"
appId="<APP_ID>"
htmlRef="<REF_STRING>"
/>,
document.getElementById('demo'),
);Note: It will handle sdk initialize automatically for you. See more details in Customer Chat Plugin official docs and Customer Chat SDK official docs.
static propTypes = {
pageId: PropTypes.string.isRequired,
appId: PropTypes.string.isRequired,
shouldShowDialog: PropTypes.bool,
htmlRef: PropTypes.string,
minimized: PropTypes.bool,
themeColor: PropTypes.string,
loggedInGreeting: PropTypes.string,
loggedOutGreeting: PropTypes.string,
greetingDialogDisplay: PropTypes.oneOf(['show', 'hide', 'fade']),
greetingDialogDelay: PropTypes.number,
autoLogAppEvents: PropTypes.bool,
xfbml: PropTypes.bool,
version: PropTypes.string,
language: PropTypes.string,
debug: PropTypes.bool,
onCustomerChatDialogShow: PropTypes.func,
onCustomerChatDialogHide: PropTypes.func,
};
static defaultProps = {
shouldShowDialog: false,
htmlRef: undefined,
minimized: undefined,
themeColor: undefined,
loggedInGreeting: undefined,
loggedOutGreeting: undefined,
greetingDialogDisplay: undefined,
greetingDialogDelay: undefined,
autoLogAppEvents: true,
xfbml: true,
version: '2.11',
language: 'en_US',
debug: false,
onCustomerChatDialogShow: undefined,
onCustomerChatDialogHide: undefined,
};To make <MessengerComponent /> work with Server-Side Rendering (SSR), you need to avoid rendering it on the server:
{
typeof window !== 'undefiend' && (
<MessengerComponent
pageId="<PAGE_ID>"
appId="<APP_ID>"
htmlRef="<REF_STRING>"
/>
);
}If you're having trouble getting the plugin to render properly, try the tips below:
- If you see a console error like "Refused to display _ in a frame because an ancestor violates the following Content Security Policy directive: _", check that the domain of the page the plugin is being rendered on has been whitelisted. Also make sure you didn't set the
Referrer-Policy headertono-referrer. - The Firefox Facebook Container Add-On prevents the plugin from showing up. Remove the add on if you want the plugin to render.
- Firefox desktop private browsers (version 63 and above) and Firefox mobile browsers block content tracking by default which will prevent the plugin from rendering. Turn off content blocking (click the gray shield in the search bar) to see the plugin render.
- react-messenger-checkbox - React component for messenger checkbox plugin.
- react-messenger-message-us - React component for messenger message us plugin.
- react-messenger-send-to-messenger - React component for messenger send to messenger plugin.
- messaging-api-messenger - Messaging APIs for Messenger.
- bottender - Make Bots in Your Way, Fast and Flexibly.
MIT © Yoctol