Send-to-Messenger Plugin

The "Send to Messenger" plugin is used to trigger an authentication event to your webhook. You can pass in data to know which user and transaction was tied to the authentication event, and link the user on your back-end.

The first time a person clicks on this button, a confirmation popup will be presented.

To use this plugin, your app needs to subscribe to your page's webhook. When your app is in development mode, the plugin is only visible to admins, developers and testers of the app. In development mode, the plugin will not be visible if there isn't an active session.

Setup

<body>
  <script>

    window.fbAsyncInit = function() {
      FB.init({
        appId: "APP_ID",
        xfbml: true,
        version: "v2.6"
      });

    };

    (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) { return; }
       js = d.createElement(s); js.id = id;
       js.src = "//connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

  </script>

...

Plugin Code

<div class="fb-send-to-messenger" 
  messenger_app_id="APP_ID" 
  page_id="PAGE_ID" 
  data-ref="PASS_THROUGH_PARAM" 
  color="blue" 
  size="standard">
</div>

Settings

Parameter	Description	Type	Required
`color`	Color of the button	Enum (`blue`, `white`)	N, default is `blue`
`size`	Size of the plugin	Enum (`standard`, `large`, `xlarge`)	N, default is `large`
`data-ref`	Custom state parameter. It should be encoded and encrypted for security purposes.	String of max 250 characters. Valid characters are `a-z A-Z 0-9 +/=-.:_`	N
`enforce_login`	If `true`, logged-in users must login again when clicking the button.	boolean	N, default is `false`

Use the data-ref param to pass state with the authentication. If you surface the plugin in multiple places, you may want to modify the state based on the place where the plugin is shown.

Event Subscription

Subscribe to plugin events.

<script>

  FB.Event.subscribe('send_to_messenger', function(e) {
    // callback for events triggered by the plugin
  
  });

</script>

Event Fields

Field Name	Type	Description
`event`	Enum	Name of event. Possible values: `rendered`, `clicked`, `not_you`, `opt_in`.
`ref`	String	Contains the value set on the `data-ref` param on the plugin.
`is_after_optin`	Boolean	Indicates whether event happened after the confirmation pop-up was confirmed.
`pluginID`	undefined	This field is not used.

Callback

This triggers the opt-in callback.