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

Yoctol
240 Stars 59 Forks MIT License 184 Commits 11 Opened issues

Description

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

Screenshots

Prerequisite

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

Installation

$ npm install react-messenger-customer-chat

Usage

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.

Props

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, };

Next.js/SSR

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
    to
    no-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.

Related

License

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.