First, whitelist your domain to be eligible to use the messenger chat in facebooks page settings:

Facebook page > Settings > Messaging (in sidebar) > Add messenger to your website > Whitelist domain

import React from 'react';
import ReactDOM from 'react-dom';
import { MessengerChat } from 'react-messenger-chat-plugin';

ReactDOM.render(
  <MessengerChat
    pageId='123456789101112'
    language='en_US'
    themeColor={'#F2F3G2'}
    height={24}
    loggedInGreeting='Hello logged in user!'
    loggedOutGreeting='Hello stranger!'
    autoExpand={true}
    debugMode={false}
    onMessengerShow={() => {console.log('onMessengerShow')}}
    onMessengerHide={() => {console.log('onMessengerHide')}}
    onMessengerDialogShow={() => {console.log('onMessengerDialogShow')}}
    onMessengerDialogHide={() => {console.log('onMessengerDialogHide')}}
    />;
  document.getElementById('demo')
);

:warning: NOTE: some attributes can be controlled from your facebook page messenger chat plugin configurations. These are by default overriden by the props, so if you want more control from facebook -> populate less props.

This package also supports control functions for the messenger chat which can be accessed globally. The control functions will only work after the messenger chat has succesfully mounted.

import { MessengerChat, showMessenger, hideMessenger, showDialog, hideDialog, setMessengerHeight } from 'react-messenger-customer-chat';

function App() {

  return (
    <div className="App">
      <button onClick={() => {showMessenger(true)}}>show messenger</button>
      <button onClick={() => {hideMessenger()}}>hide messenger</button>
      <button onClick={() => {showDialog()}}>show dialog</button>
      <button onClick={() => {hideDialog()}}>hide dialog</button>
      <button onclick={() => {setMessengerHeight(100)}}>set chat 100px from bottom<button>

      <MessengerChat pageId='123456789101112' />
    </div>
  );
}

export default App;