https://github.com/yoctol/react-messenger-checkbox
React component for messenger checkbox plugin
https://github.com/yoctol/react-messenger-checkbox
Last synced: 3 months ago
JSON representation
React component for messenger checkbox plugin
- Host: GitHub
- URL: https://github.com/yoctol/react-messenger-checkbox
- Owner: Yoctol
- License: mit
- Created: 2018-03-14T08:14:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T03:51:26.000Z (almost 3 years ago)
- Last Synced: 2025-08-31T14:43:56.434Z (10 months ago)
- Language: JavaScript
- Size: 1.98 MB
- Stars: 10
- Watchers: 10
- Forks: 2
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Messenger Checkbox
> React component for [Messenger checkbox plugin](https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin)
[](https://www.npmjs.com/package/react-messenger-checkbox)
[](https://travis-ci.org/Yoctol/react-messenger-checkbox)
[](https://opensource.org/licenses/MIT)
## 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](https://github.com/Yoctol/messaging-apis/tree/master/packages/messaging-api-messenger#setwhitelisteddomainsdomains)
## Installation
```sh
npm install react-messenger-checkbox
```
## Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import MessengerCheckbox from 'react-messenger-checkbox';
ReactDOM.render(
,
document.getElementById('demo')
);
```
> Note: It will handle sdk initialize automatically for you. See more details in
> [fbsdk official docs](https://developers.facebook.com/docs/javascript/quickstart/).
## Props
```js
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](https://github.com/Yoctol/react-messenger-customer-chat) - React component for messenger customer chat plugin.
* [react-messenger-message-us](https://github.com/Yoctol/react-messenger-message-us) - React component for messenger message us plugin.
* [react-messenger-send-to-messenger](https://github.com/Yoctol/react-messenger-send-to-messenger) - React component for messenger send to messenger plugin.
* [messaging-api-messenger](https://github.com/Yoctol/messaging-apis/tree/master/packages/messaging-api-messenger) - Messaging APIs for Messenger.
* [bottender](https://github.com/Yoctol/bottender) - Make Bots in Your Way, Fast and Flexibly.
## License
MIT © [Yoctol](https://github.com/Yoctol/react-messenger-checkbox)