2.1.0 • Published 6 years ago
react-messenger-plugin v2.1.0
react-messenger-plugin
Component wrapper for Facebook Messenger plugins
Installation
npm install --save react-messenger-pluginUsage
To use the Messenger Plugin, you will need an App Id and a Page Id. You can find create an app here and you will find your page Id at the bottom of your Facebook page settings.
You can then use the plugin.
var React = require("react");
var render = require("react-dom").render;
var MessengerPlugin = require("react-messenger-plugin");
render(
<MessengerPlugin
appId="<YOUR-APP-ID>"
pageId="<YOUR-PAGE-ID>"
/>,
document.body
);Notes
Expect a delay before the button appears. This is mainly caused by the time required by the Facebook SDK to load and then the time for it to initialize. To reduce the delay, see the advance usage described below.
Props
| Name | Type | Required? | Default | Description |
|---|---|---|---|---|
| appId | string | yes | - | Your Facebook app id |
| pageId | string | yes | - | Your Facebook page id |
| version | string | no | v2.6 | The Facebook API version you are using, See documentation. |
| passthroughParams | string | no | - | Equivalent of data-ref. Used to pass state with the authentication. See documentation. |
| type | string | no | send-to | Type of plugin. Must be either send-to (Send-to-Messenger plugin) or message-us (Message-Us plugin). |
| color | string | no | blue | Color of the button. Must be either blue or white. |
| size | string | no | standard | Size of the button. Must be either standard, large, or xlarge. |
| asyncScriptOnLoad | function | no | - | Callback triggered when the SDK script is loaded. |
Advanced usage
If you already have the Facebook SDK loaded in your page, you can use the unwrapped component and pass the SDK to it.
var React = require("react");
var render = require("react-dom").render;
var MessengerPlugin = require("react-messenger-plugin/lib/MessengerPlugin");
render(
<MessengerPlugin
appId="<YOUR-APP-ID>"
pageId="<YOUR-PAGE-ID>",
FB={window.FB}
/>,
document.body
);Inspired by react-google-recaptcha