title: Facebook messenger checkbox plugin is hidden
body: <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>