fb-stm-button

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
        className={`flex stm-button ${!this.state.stmLoaded && "loading"}`}
        style={this.props.currentView === "email" ? { display: "none" } : {}}
      >
        <FbStmButton
          appId="YOUR-APP-ID"
          pageId="YOUR-PAGE-ID"
          subscribeEvents={this.events}
        />
      </div>
    );
  }
}