React Messenger Checkbox

React component for Messenger checkbox 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-checkbox

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import MessengerCheckbox from 'react-messenger-checkbox';

ReactDOM.render(
  <div>
    <MessengerCheckbox
      pageId="<PAGE_ID>"
      appId="<APP_ID>"
      origin="<ORIGIN>"
      userRef="<USER_REF>"
    />,
    <input type="button" onClick={global.confirmOptIn} value="Confirm Opt-in" />
  </div>
  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,
  origin: PropTypes.string.isRequired,
  userRef: PropTypes.string.isRequired,

  prechecked: PropTypes.bool,
  allowLogin: PropTypes.bool,
  size: PropTypes.oneOf(['small', 'medium', 'large', 'standard', 'xlarge']),
  skin: PropTypes.oneOf(['light', 'dark']),
  centerAlign: PropTypes.bool,
  autoLogAppEvents: PropTypes.bool,
  xfbml: PropTypes.bool,
  version: PropTypes.string,
  language: PropTypes.string,
  debug: PropTypes.bool,
  onEvent: PropTypes.func,
};

static defaultProps = {
  prechecked: true,
  allowLogin: true,
  size: 'large',
  skin: 'light',
  centerAlign: false,
  autoLogAppEvents: true,
  xfbml: true,
  version: '2.11',
  language: 'en_US',
  debug: false,
  onEvent: () => {},
};

Related

• react-messenger-customer-chat - React component for messenger customer chat 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.

License

MIT © Yoctol