Search code examples
facebookfacebook-javascript-sdk

Facebook Messenger Checkbox Plugin not working / rendering


We've created a new Facebook App (not reviewed) and added the Messenger Product. We've connected our Facebook Page (Visible: Public) with our App and added a Webhook to the App. As described in the documentation we also have whitelisted our domain in the page settings. But still the plugin does not get rendered. Console output: 'Plugin was hidden'

When testing we're logged in as a Facebook user which has an admin role in the app as well as on the page.

Below you can see how we've integrated the messenger checkbox plugin. As origin we use our domain where the plugin is integrated.

<script>
     window.fbAsyncInit = function() {
        FB.init({
            appId: '766805437589568',
            autoLogAppEvents: true,
            xfbml: true,
            version: 'v9.0'
        });

        FB.Event.subscribe('messenger_checkbox', function(e) {
            console.log("messenger_checkbox event");
            console.log(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/en_US/sdk.js"></script>
<div class="fb-messenger-checkbox" 
  origin='https://example.com'
  page_id=100378165398818
  messenger_app_id=766805437589568
  user_ref="%%uniqueIdForEveryRender%%" 
  allow_login="false" 
  size="large" 
  skin="dark" 
  center_align="true">
</div>

In the printscreen you can see the output from the dev console.

console output

We've already checked the following post Facebook messenger checkbox plugin is hidden.


Solution

  • Looks like it is a GDPR related issue: https://developers.facebook.com/docs/messenger-platform/europe-updates#nov-30th-2020

    In the table Affected features and APIs with mitigations there is an entry for the checkbox plugin:

    enter image description here

    So we have no choice but to wait until facebook switches the service back on.