Need help with react-messenger-customer-chat?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

240 Stars 59 Forks MIT License 184 Commits 11 Opened issues


React component for messenger customer chat plugin

Services available


Need anything else?

Contributors list

React Messenger Customer Chat

React component for Messenger customer chat plugin

npm Build Status License: MIT



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-chat


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

ReactDOM.render( , 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

 work with Server-Side Rendering (SSR), you need to avoid rendering it on the server:
  typeof window !== 'undefiend' && (

Troubleshooting Tips

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 header
  • 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.



MIT © Yoctol

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.