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.
We've already checked the following post Facebook messenger checkbox plugin is hidden.
