Facebook’s Checkbox plugin remains hidden no matter what I try

I’m having trouble getting the Messenger Checkbox plugin to work: the Facebook script loads fine, it parses the page well (I can see this with the debug version of the SDK), but the checkbox remains in "hidden" status.

This is an HTML sample of my page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TestCheckboxMessenger</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function () {
        FB.init({
          appId: "[my-app-id]",
          autoLogAppEvents: true,
          xfbml: true,
          version: "v10.0",
        });

        FB.Event.subscribe("messenger_checkbox", function (e) {
          if (e.event == "rendered") {
            console.log("Plugin was rendered");
          } else if (e.event == "checkbox") {
            var checkboxState = e.state;
            console.log("Checkbox state: " + checkboxState);
          } else if (e.event == "not_you") {
            console.log("User clicked 'not you'");
          } else if (e.event == "hidden") {
            console.log("Plugin was hidden");
          }
        });
      };
    </script>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/fr_FR/sdk/debug.js"
    ></script>

    <div
      class="fb-messenger-checkbox"
      origin="https://[my-domain-name]/"
      page_id="[my-page-id]"
      messenger_app_id="[my-app-id]"
      user_ref="[some-random-id]"
      size="medium"
      skin="light"
      center_align="true"
    ></div>

    <app-root></app-root>
  </body>
</html>

I have carefully read the facebook documentation and the solutions proposed on StackOverflow, but the checkbox does not appear. I have taken into account the following points:

  • My page is served on HTTPS with a domain name that is whitelisted in my page options
  • The user_ref is a randomly generated id that is new on every page refresh
  • My app is in what was called "development mode" so I have Standard access to pages_messaging and I have admin role on the app (and I am connected to my account)
  • My Messenger webhook is live and working

As strange as it may seem, the conversation plugin works fine.

What conversation plugin looks like

Is there a method to debug the checkbox status? To know why it is hidden? Because I have no error message in the Chrome console and all this is very frustrating 🙂

Source: Facebook SDK Questions

LEAVE A COMMENT