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

Answer 2

The greeting_dialog_display attribute is working when set to hide. The dialog just stays open when the messenger icon is clicked because there's no way to close unless you sign in to messenger.

Answer 3

I had the same problem. What I did wrong was that I placed my HTML above the script because I needed to place it in certain place, so I put all the scripts at the bottom of the page and the HTML for the messenger was at the center of my page. So try to place the script above it.

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'MY_APP_ID',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.12'
        });
    };

    (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>
<div class="supportTeam">
    <div class="trigger"></div>
    <div class="messenger">
        <div class="fb-customerchat"
             page_id="YOUR_PAGE_ID"
             theme_color="#0084ff"
             greeting_dialog_display="hide"
             logged_in_greeting="Welcome, How we may help you"
             logged_out_greeting="Welcome, How we may help you">
        </div>
    </div>
</div>

If this does not help, try to get the latest version of the SDK, or check the console. They give you errors in case something is wrong.