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:
Answer
Facebook updated their docs:
The web plugin takes a
user_refparameter 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