Facebook Customer Chat plugin

Gallex · 2019-01-28 11:21:08

i’m using code below and the plugin showing up correctly in my site
but i would like it to hide the dialog box on page load (so that only the button showing up).
i can’t understand, where and what function i need to add. :( could anybody help me?
https://developers.facebook.com/docs/messenger-platform/

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(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_GB/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="555555555555555"
  logged_in_greeting="Tere! Kuidas saame Sind aidata?"
  logged_out_greeting="Tere! Kuidas saame Sind aidata?">
</div>

Gallex · 2019-01-29 09:38:11

nobody is using it?

colak · 2019-01-29 10:30:04

Hi Gallex
Although many times it is unavoidable, most people try not to use tracking/profiling software on their sites.

uli · 2019-01-29 13:46:32

The button is inside the element you want to hide, so you can’t use the CSS display property nor opacity. Hence you’d need to use transparent color to hide the undesired ones.

Gallex · 2019-01-31 09:12:59

uli wrote #316340:

The button is inside the element you want to hide, so you can’t use the CSS display property nor opacity. Hence you’d need to use transparent color to hide the undesired ones.

no-no, not with css. there is javascript function that should do this.
did you look at this page?

jakob · 2019-01-31 09:55:37

It looks like you need to precede your embed code with FB.init( … ); as shown here and set xfbml to false to prevent it automatically parsing your code.

Then, after your embed code, you can initialise the chatbot with the dialog hidden from start:

FB.CustomerChat.show(shouldShowDialog: false);

Alternatively, once you have loaded it, call:

FB.CustomerChat.hideDialog();

after initialising the script. When I enter that in the console using the browser’s web inspector, the dialog disappears but the button remains. Clicking on the button brings it back.

Gallex · 2019-01-31 12:57:39

jakob wrote #316378:

…after initialising the script. When I enter that in the console using the browser’s web inspector, the dialog disappears but the button remains. Clicking on the button brings it back.

i don’t know what i make wrong, but it doesn’t work… :(
jakob, could you please provide the whole correct code?
i don’t know where exactly i need to put this FB.CustomerChat.show(shouldShowDialog: false); ?
inside appId and page_id should be the same number?

my code right now:

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '54184...',
      autoLogAppEvents : true,
      xfbml            : false,
      version          : 'v3.2'
    });
  };

  (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_GB/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="54184...."
  logged_in_greeting="Tere! Kuidas saame Sind aidata?"
  logged_out_greeting="Tere! Kuidas saame Sind aidata?">
</div>

jakob · 2019-01-31 14:02:43

Hi Gallex, I’ve never used or even looked at the plugin before. All I did was read the docs you linked to.

My guess is you add FB.CustomerChat.show(shouldShowDialog: false); just before your closing </script> tag, e.g.:

   }(document, 'script', 'facebook-jssdk'));
   FB.CustomerChat.show(shouldShowDialog: false);
</script>

Failing that try:

window.fbAsyncInit = function() {
    FB.init({
      appId            : '54184...',
      autoLogAppEvents : true,
      xfbml            : false,
      version          : 'v3.2'
    });
    FB.CustomerChat.show(shouldShowDialog: false);
  };

Otherwise see if you can find some examples on the web, or try contacting FB through their chatbot ;-)

Gallex · 2019-02-01 10:08:12

not working and in both way my browser console says:
Uncaught SyntaxError: missing ) after argument list (index):307

this is the FB.CustomerChat.show(shouldShowDialog: false); row. hmmm…

jakob · 2019-02-01 10:44:33

Hmm, it’s pretty hard to debug from afar, especially having never used the chatbot. Looking at the docs, it’s also necessary to call FB.XFBML.parse(); once you’ve set your other parameters but entering that via the console gives an “iframe blocked” error.

Another attempt: how about going back to your original code that automatically parses and loads the chatbot (as you had it at the beginning) and then hiding the dialog afterwards by adding FB.CustomerChat.hideDialog(); before the final </script>.

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
(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_GB/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
  FB.CustomerChat.hideDialog();
</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="555555555555555"
  logged_in_greeting="Tere! Kuidas saame Sind aidata?"
  logged_out_greeting="Tere! Kuidas saame Sind aidata?">
</div>

Gallex · 2019-02-01 11:19:01

tried the second one. still the button showing up with a dialog box and console says:
Uncaught ReferenceError: FB is not defined

Gallex · 2019-02-13 10:29:03

i found solution. working code below. i just needed to sign up here as a facebook developer and add into code my personal appId which i get from fb developer page. now only button showing up.

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

(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_GB/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="54...."
   greeting_dialog_display="hide"
  logged_in_greeting="Welcome, How we may help you?"
  logged_out_greeting="Welcome, How we may help you?">
</div>

Textpattern CMS

Textpattern CMS support forum

#1 2019-01-28 11:21:08