Facebook messenger checkbox plugin is hidden
<p>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.</p>

<p>Here's an simplified example of the code:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
    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'
        });
    }
&lt;/script&gt;      

&lt;div class="col-md-7"&gt;
    &lt;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"&gt;
    &lt;/div&gt;   
&lt;/div&gt;

&lt;body&gt;
    &lt;input type="button" onclick="confirmOptIn()" value="Confirm Opt-in"/&gt;
&lt;/body&gt;
</code></pre>

<p>
</p>

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

<p><a href="https://i.stack.imgur.com/91Q8O.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/91Q8O.jpg" alt="Screenshot of dev console message"></a></p>