react-messenger-plugin

Component wrapper for Facebook Messenger plugins

Installation

npm install --save react-messenger-plugin

Usage

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