4
votes

Masquer la boîte de dialogue d'accueil du plugin de chat client Facebook lors du chargement de la page

J'ai essayé de masquer la boîte de dialogue d'accueil du plugin de chat client lors du chargement initial de la page. Voici les choses qui n'ont pas fonctionné:

  • Attribut greet_dialog_display
  • Attribut Greet_dialog_delay

Ce qui était étrange car d'autres attributs comme theme_color et logs_in_greeting semblent fonctionner parfaitement.

J'utilise la fonction fbAsyncInit pour m'assurer que j'exécute le code après l'initialisation du plugin. Je l'ai utilisé pour m'abonner à des événements tels que customerchat.show, customerchat.load etc., puis masquer la boîte de dialogue, mais cela n'a pas fonctionné non plus.

J'ai également essayé de définir xfbml sur false, puis de l'analyser pour utiliser FB.CustomerChat.show (shouldShowDialog: boolean) avec false mais en vain.

Voici le 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>


3 commentaires

Voulez-vous le faire disparaître après qu'il soit affiché pendant un bref moment, ou voulez-vous le cacher complètement? Pour ce dernier, vous devez utiliser Greet_dialog_display = "hide"


Je l'ai fait mais cela ne fonctionnait pas. J'ai donc essayé de définir la valeur sur fondu en conjonction avec Greet_dialog_delay, qui ne fonctionne pas non plus.


J'ai le même problème - la boîte de dialogue se cachant tout simplement pas. ressemble à un problème très courant ...


3 Réponses :


0
votes

L'attribut greet_dialog_display fonctionne lorsqu'il est défini sur hide. La boîte de dialogue reste ouverte lorsque vous cliquez sur l'icône de messagerie car il n'y a aucun moyen de la fermer à moins que vous ne vous connectiez à Messenger.


2 commentaires

puis-je voir votre site?


@Gallex Désolé. Il est toujours en cours de test, principalement parce que le client craint que vous ne puissiez fermer la boîte de dialogue à moins d'être connecté, ce qui pourrait créer une mauvaise UX.



3
votes

J'ai eu le même problème. Ce que j'ai fait de mal, c'est que j'ai placé mon HTML au-dessus du script parce que je devais le placer à un certain endroit, alors j'ai mis tous les scripts au bas de la page et le HTML pour le messager était au centre de ma page. Essayez donc de placer le script au-dessus.

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

Si cela ne résout pas le problème, essayez d'obtenir la dernière version du SDK ou vérifiez la console. Ils vous donnent des erreurs au cas où quelque chose ne va pas.


5 commentaires

J'ai du HTML pour le messager sous le script (comme dans votre exemple). aucune erreur dans la console


avez-vous ajouté l'app_id pour le FB.init?


non. où puis-je obtenir appId? appId et page_id ne sont pas les mêmes, n'est-ce pas?


non, il y en a différents. app_id, vous pouvez l'obtenir à partir de votre page de développeur Facebook. Inscrivez-vous à partir d'ici lien en tant que développeur. Vous pouvez ouvrir un nouveau compte si vous le souhaitez au lieu d'utiliser votre compte personnel FB. Après cela, vous trouverez votre appId et la navigation blanche supérieure.


La messagerie n'a pas fonctionné pour moi au début jusqu'à ce que j'aie ajouté mon APP_ID



5
votes

Vous devriez changer:

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

Créez la balise div sur une seule ligne. Cela fonctionne pour moi


1 commentaires

Oui, c'est vrai. J'ai supposé que la raison avait quelque chose à voir avec l'éditeur intégré utilisé pour injecter ce code.