Facebook messenger checkbox plugin is hidden

Question

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:

Have you looked in the browsers Developer console? What does it say? — WizKid, Dec 15 '16 at 01:05
There are no errors in the dev console. I added a screenshot of the state logs to the post — Stefanvdk, Dec 15 '16 at 09:12
One thing I found that was causing problem for me was that the parent div was hidden in my case, which caused the container-width they take as 0px. Moving that same button to first section of my 5 page wizard fixed it. Make sure your div is visible and has width > 0px. — Jay Patel - PayPal, Oct 06 '18 at 19:50

Amio.io · Accepted Answer · 2018-10-09T11:06:17.460

5

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

edited Oct 09 '18 at 11:06

answered Jul 04 '17 at 15:42

Amio.io

20,677
15
82
117

I am using proper user_ref, actually we have plugin for shopify but for some shops plugin is hidden, I am not sure why? – Thorin May 25 '18 at 06:57
@Thorin We have other troubleshooting tips in our documentation: https://docs.amio.io/docs/facebook-messenger-entry-points-from-webpage#section-troubleshooting I would personally check especially `allow_login ` and that `messenger_app_id ` and `appId` are equal. Let me know. – Amio.io May 27 '18 at 08:03
Yes, I have gone through those troubleshooting tips, but my point is why for some shops code behave differently and worked for some of the stores – Thorin May 29 '18 at 07:55
@Thorin, nothing is on my mind why... If you find out, come back and write me what was the catch. Thx! – Amio.io May 29 '18 at 11:07

score 3 · Answer 2 · answered Jan 11 '17 at 11:52

3

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

answered Jan 11 '17 at 11:52

Phil K

51
4

1

The checkbox is visible when the webpage loads. When you say that you implemented this what do you mean exactly? Could you share the code pls? – Stefanvdk Jan 13 '17 at 16:35
@Stefanvdk Yes here is my code, can't post too long! – Phil K Jan 16 '17 at 15:20
I think something has gone wrong because I can't see the code. Could you please try to share it again? – Stefanvdk Jan 18 '17 at 08:10

score 2 · Answer 3 · answered Dec 20 '17 at 12:07

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.

score 0 · Answer 4 · answered Dec 20 '16 at 14:40

0

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.)

answered Dec 20 '16 at 14:40

Sskirch

17
2

Thanks, this seems to fix the problem! So now I've run into problems with rendering because atm I'm not able to generate a random number in JS and put that as an attributevalue for user_ref in the plugin element. Any tips? – Stefanvdk Dec 21 '16 at 19:38
I've got it working now with PHP instead of JS. Fine for now, so thanks for your answer! – Stefanvdk Dec 21 '16 at 20:04
@Stefanvdk is it possible to share your php code snippet please. – J P Jan 04 '17 at 09:16
@JP Sure, np!

– Stefanvdk Jan 09 '17 at 21:20
@Stefanvdk do you need to have any webhooks registered for your app to make it work? I am having the same problem. Can't make the messenger checkbox show. I've checked everything, the only difference is that I use JS Date object to generate unique user_ref and I add the div element dynamically to the body again with JS. It seems to be working as I see the subscription event being fired but the plugin is hidden. – iliyan tanev Feb 05 '18 at 12:50
@iliyantanev , Did you find the solution for this? I am trying some ways, but still I do not find the solution. – wilfredonoyola Jul 23 '18 at 18:11
@wilfredonoyola, yep. You pretty much, need to make sure you are fulfilling everything described in the Troubleshooting Tips on this page - https://developers.facebook.com/docs/messenger-platform/discovery/checkbox-plugin and yes, you need to subscribe to a webhook and keep in mind that localhost is not supported as a subscription address. – iliyan tanev Jul 24 '18 at 09:21

score 0 · Answer 5 · answered Jan 18 '17 at 11:14

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>

Thanks for sharing! I looked into your code but can't find what's going wrong. I visited your website and could see that you user_id is different every time so that's not it I'm afraid. — Stefanvdk, Jan 22 '17 at 11:14
I've the same problem, already tried to generate random user id, but as Phil, the problem still goes on. Do you have any other solution for this problem? Thanks — quick release, Mar 21 '17 at 14:05

score 0 · Answer 6 · answered May 01 '19 at 10:57

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

score 0 · Answer 7 · answered Aug 07 '19 at 11:36

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

Facebook messenger checkbox plugin is hidden

7 Answers7

Linked