React Messenger Send To Messenger

React component for Messenger send to Messenger plugin

Screenshot

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-send-to-messenger

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import MessengerSendToMessenger from 'react-messenger-send-to-messenger';
 
ReactDOM.render(
  <MessengerSendToMessenger pageId="<PAGE_ID>" appId="<APP_ID>" />,
  document.getElementById('demo')
);

Note: It will handle sdk initialize automatically for you. See more details in fbsdk official docs.

Props

static propTypes = {
  pageId: PropTypes.string.isRequired,
  appId: PropTypes.string.isRequired,
 
  dataRef: PropTypes.string,
  color: PropTypes.string,
  size: PropTypes.string,
  enforceLogin: PropTypes.bool,
  ctaText: PropTypes.oneOf([
    'GET_THIS_IN_MESSENGER',
    'RECEIVE_THIS_IN_MESSENGER',
    'SEND_THIS_TO_ME',
    'GET_CUSTOMER_ASSISTANCE',
    'GET_CUSTOMER_SERVICE',
    'GET_SUPPORT',
    'LET_US_CHAT',
    'SEND_ME_MESSAGES',
    'ALERT_ME_IN_MESSENGER',
    'SEND_ME_UPDATES',
    'MESSAGE_ME',
    'LET_ME_KNOW',
    'KEEP_ME_UPDATED',
    'TELL_ME_MORE',
    'SUBSCRIBE_IN_MESSENGER',
    'SUBSCRIBE_TO_UPDATES',
    'GET_MESSAGES',
    'SUBSCRIBE',
    'GET_STARTED_IN_MESSENGER',
    'LEARN_MORE_IN_MESSENGER',
    'GET_STARTED',
    'SEND_TO_MESSENGER',
  ]),
  autoLogAppEvents: PropTypes.bool,
  xfbml: PropTypes.bool,
  version: PropTypes.string,
  language: PropTypes.string,
  debug: PropTypes.bool,
};
 
static defaultProps = {
  dataRef: undefined,
  color: 'blue',
  size: 'large',
  enforceLogin: false,
  ctaText: undefined,
  autoLogAppEvents: true,
  xfbml: true,
  version: '2.11',
  language: 'en_US',
  debug: false,
};

Related

• react-messenger-customer-chat - React component for messenger customer chat plugin.
• react-messenger-checkbox - React component for messenger checkbox plugin.
• react-messenger-message-us - React component for messenger message us plugin.
• messaging-api-messenger - Messaging APIs for Messenger.
• bottender - Make Bots in Your Way, Fast and Flexibly.

License

MIT © Yoctol