Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Gallex
Member
Registered: 2006-10-08
Posts: 1,110

Facebook Customer Chat plugin

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>

Offline

#2 2019-01-29 09:38:11

Gallex
Member
Registered: 2006-10-08
Posts: 1,110

Re: Facebook Customer Chat plugin

nobody is using it?

Offline

#3 2019-01-29 10:30:04

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 7,107
Website

Re: Facebook Customer Chat plugin

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


Yiannis
——————————
neme.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#4 2019-01-29 13:46:32

uli
Moderator
From: Cologne
Registered: 2006-08-15
Posts: 4,181

Re: Facebook Customer Chat plugin

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.


In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links

Offline

#5 2019-01-31 09:12:59

Gallex
Member
Registered: 2006-10-08
Posts: 1,110

Re: Facebook Customer Chat plugin

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?

Offline

#6 2019-01-31 09:55:37

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,344
Website

Re: Facebook Customer Chat plugin

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.


TXP Builders – finely-crafted code, design and txp

Offline

#7 2019-01-31 12:57:39

Gallex
Member
Registered: 2006-10-08
Posts: 1,110

Re: Facebook Customer Chat plugin

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>

Offline

#8 2019-01-31 14:02:43

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,344
Website

Re: Facebook Customer Chat plugin

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 ;-)


TXP Builders – finely-crafted code, design and txp

Offline

#9 2019-02-01 10:08:12

Gallex
Member
Registered: 2006-10-08
Posts: 1,110

Re: Facebook Customer Chat plugin

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…

Offline

#10 2019-02-01 10:44:33

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,344
Website

Re: Facebook Customer Chat plugin

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>

TXP Builders – finely-crafted code, design and txp

Offline

Board footer

Powered by FluxBB