Facebook Send To Messenger Button for React JS
React JS component to render Facebook's Send-to-Messenger plugin (STM) FB Docs
Usage
Install:
npm i fb-stm-button
Import:
import FbStmButton from "fb-stm-button";
In your React JS project:
<FbStmButton appId="YOUR-APP-ID" pageId="YOUR-PAGE-ID" />
Available Props:
See official docs to learn more about each
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,
subscribeEvents: PropTypes.func
Example of subcribeEvents
import PropTypes from "prop-types";
import React from "react";
import FbStmButton from "fb-stm-button";
export default class StmBox extends React.Component {
constructor() {
super();
this.state = { stmLoaded: false };
}
events = e => {
console.log(e);
if (e.event === "rendered") this.setState({ stmLoaded: true });
};
render() {
return (
<div>
<FbStmButton
appId="YOUR-APP-ID"
pageId="YOUR-PAGE-ID"
subscribeEvents={this.events}
/>
</div>
);
}
}