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 = '.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>

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/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>

• javascript
• facebook
• facebook-customer-chat

• Do you want to fade it out after it gets shown for a brief moment, or do you want to pletely hide it? For the latter, you should use greeting_dialog_display="hide" – 04FS Commented Feb 1, 2019 at 11:24
• I did but that wasn't working. So, I tried by setting the value to fade in conjunction with greeting_dialog_delay, which doesn't work either. – Sindhu Shree Commented Feb 1, 2019 at 11:28
• i have same problem - dialogbox hiding just not working. looks like very mon issue... – Gallex Commented Feb 2, 2019 at 11:16

3 Answers 3

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

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/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="Wele, How we may help you"
             logged_out_greeting="Wele, 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.

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.