Hide facebook customer chat plugin's greeting dialog on page load

Question

I have been trying to hide the customer chat plugin's greeting dialog on initial page load. Here are the things that didn't work:

• greeting_dialog_display attribute
• greeting_dialog_delay attribute

Which was strange because other attributes like theme_color and logged_in_greeting seem to be working perfectly.

I am using fbAsyncInit function to make sure I run the code after the plugin has been initialized. I used that to subscribe to events such as customerchat.show, customerchat.load etc. and then hiding the dialog but that didn't work either.

Also tried setting xfbml to false and then parsing it to use the FB.CustomerChat.show(shouldShowDialog: boolean) with false but to no avail.

Here's the code:

    <!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });

    $(document).trigger('fbload');
  };

  (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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="123456789"
  greeting_dialog_display="fade"
  greeting_dialog_delay="10"
  theme_color="#ff7e29">
</div>
<script>
    $(function() {
        $(document).on('fbload', function() {
            console.log('fb loaded!');
        });
    });
</script>

Answer 1

You should change:

<div class="fb-customerchat"
  attribution=setup_tool
  page_id="123456789"
  greeting_dialog_display="fade"
  greeting_dialog_delay="10"
  theme_color="#ff7e29">
</div>

TO:

<div class="fb-customerchat" attribution=setup_tool page_id="123456789" greeting_dialog_display="fade" greeting_dialog_delay="10" theme_color="#ff7e29"></div>

Make the div tag in one line. It works for me