Facebook messenger checkbox plugin is hidden

I'm trying to implement the new Facebook Checkbox plugin in a form but in a weird way I can't get it showing on the screen. So I don't get errors clientside but Iframe is hidden.

Here's an simplified example of the code:

<html>
<head>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : '1815704925309469',
            xfbml      : true,
            version    : 'v2.6'
        });

        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");
            }
        });
    };

    (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')
    );

    function confirmOptIn() {
        FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
            'app_id':'1815704925309469',
            'page_id':'1711063052543482',
            'ref':'shopping-cart-company',
            'user_ref':'1234'
        });
    }
</script>      

<div class="col-md-7">
    <div class="fb-messenger-checkbox"  
        origin=https://shopping-cart-company.herokuapp.com/index.html
        page_id=1711063052543482
        messenger_app_id=1815704925309469
        user_ref="1234" 
        prechecked="true" 
        allow_login="true" 
        size="large">
    </div>   
</div>

<body>
    <input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/>
</body>

There are no errors in the dev console. Only logs that the plugin is hidden:

Facebook updated their docs:

The web plugin takes a user_ref parameter which is used as an identifier for the user. When the user finishes the flow, we will pass this identifier back to you to identify the user. This parameter should be unique not just for every user, but for every time the plugin is rendered. If the parameter is not unique, then the plugin may not render.

You have to generate a new user_ref for every single render of the checkbox plugin.

Checklist to display CheckBox Plugin

~~use Production App Id (not the test one)~~
always regenerated user_ref
whitelist the domain in origin
use correct protocol in origin - http / https

Hi I'm trying to implement this and getting the same Hidden state in the console.

Is yours hidden until the user Confirms Opt in or is the checkbox visible on load of the webpage?

Thanks, Phil

Solved: Problem with Plugin was hidden is because the messenger app is in the development mode and that's why when you have logged out from FB the checkbox won't show up on the page and it will be hidden because there is no authorized user session. But while you have logged in on FB as a developer, owner, tester of the app then the checkbox will show up on the page because then there is an authorized session.

Try changing the user_ref. I was having the same issue. Then I discovered (by accident) that once the Facebook user has opted in, the checkbox will be hidden until you submit a different user_ref. (This is document nowhere, by the way.)

Here's the code @Stefanvdk

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '341168946244551',
        xfbml      : true,
        version    : 'v2.6'
    });

    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");
        }
    });
};

(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')
);

function confirmOptIn() {
    FB.AppEvents.logEvent('MessengerCheckboxUserConfirmation', null, {
        'app_id':'341168946244551',
        'page_id':'238619342849536',
        'ref':'shopping-cart-company',
        'user_ref':'<?=$random_val?>'
    });
}
</script>      

<?php $random_val=rand(100000,999999);?>

<div class="fb-messenger-checkbox"
origin=https://stablevehiclecontracts.co.uk/checkbox3.php 
page_id=238619342849536 
messenger_app_id=341168946244551 
user_ref="<?=$random_val?>" 
prechecked="true" 
allow_login="true" 
size="large"> </div>

Had same issue and after hours of research, I found out this as a solution:

For this to work, you must create a messaging webhook although you wouldn't make use of it.

Follow this link for steps to achieving that: https://developers.facebook.com/docs/messenger-platform/getting-started/webhook-setup

Reference: https://stackoverflow.com/a/42411068/3697733

I am using this javascript function to make sure facebook checkbox is showing when the div is in hidden.

var scan_checkbox = null;
function startCheckBoxScanenr() {
    jQuery("[id*='fb-messenger-checkbox']:first").each(function() {
        if (jQuery(this).is(':visible') && scan_checkbox === null){
            var user_ref_new = Math.floor((Math.random() * 10000000000000) + 1);
            jQuery(this).attr("user_ref", user_ref_new);
            FB.XFBML.parse();
            stopCheckboxScanner();
        }
        // else {
        //     console.log("checkbox was hidden");
        //     scan_checkbox = null;
        // }
    });
}

function stopCheckboxScanner() {
    clearInterval(checkbox_scanner);
}

来源：https://stackoverflow.com/questions/41153714/facebook-messenger-checkbox-plugin-is-hidden

标签

javascript

jquery

html

facebook

messenger