Lire la FAQ
NOUVEAU
Assistance de Bitrix24
Inscription et autorisation
Démarrer sur Bitrix24
Actualités
Tâches et projets
Messenger
Page d'accueil : Vibe
Groupes de travail
Calendriers
Bitrix24 Drive
Base de connaissances
Sites
Boutique en ligne
Gestion des stocks
Messagerie web
CRM
CoPilot - IA dans Bitrix24
Signature électronique
Signature électronique pour les RH
Analytique CRM
Constructeur BI
Automatisation
Processus d’entreprise
Sales intelligence
Espace des ventes
CRM + Boutique en ligne
Marketing
Entreprise
Market (Applications)
Centre de contact
Mon Profil
Téléphonie
Paramètres
Plan « Enterprise »
Application de bureau
Questions générales
On-Premise de Bitrix24
Connexion

Bitrix24Help

Widget du site web : paramètres avancés

Vous trouverez ci-dessous plusieurs solutions pour vous aider à identifier les clients dans le chat en direct sur votre site web Bitrix24.

Pour les utilisateurs non autorisés, nous avons des formulaires de contact client dans le chat en direct.

Nous avons également une solution intéressante pour les utilisateurs autorisés qui ne demande plus à vos clients de remplir à nouveau leurs coordonnées.

Paramètres manuels

Dans les systèmes tiers (par exemple votre facturation), des paramètres avancés sont possibles avec le code Javascript qui est intégré dans la page avec le widget du site web.

Le code général avec lequel vous pouvez personnaliser de manière flexible le widget en fonction de vos besoins ressemble à ceci :

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // 1. Installation d'une autorisation d'utilisateur externe 
  ...
  
  // 2. Installation de données supplémentaires 
  ...
  
  // 3. Gestion des événements
  ...
  
});
</script>

Méthodes de travail avec le widget du site web

  • widget.open() – ouvrir un widget ;
  • widget.close() – fermer le widget ;
  • widget.subscribe() – abonnement à un événement ;
  • widget.setUserRegisterData() – installation d'une autorisation d'utilisateur externe ;
  • widget.setCustomData() – installation de données supplémentaires ;
  • widget.setOption() – installation d'options supplémentaires.

1. Autorisation d'utilisateur externe

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // Installation d'une autorisation d'utilisateur externe
  widget.setUserRegisterData({
    'hash': '12b42ebcec7e3c26a313272c26efddbd',
    'name': 'Pierre',
    'lastName': 'Blanc',
    'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg',
    'email': 'pierre@blanc.fr',
    'gender': 'M',
    'position': 'Utilisateur d'honneur'
  });
  
});
</script>

Important !

  • hash – un champ spécial qui remplace l'autorisation. Il doit être unique au sein de votre Bitrix24 afin qu'il n'y ait pas d'intersections, et il doit être au format MD5. Par exemple : md5(USER_ID+_site_address_ + _secret_code_)
  • Ce code doit à la fois identifier l'utilisateur et être sécurisé.

2. Installation des données supplémentaires

Des données supplémentaires peuvent être fournies avec des blocs spéciaux :

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // 
Installation de données supplémentaires (publiées en début de nouvelle session, format étendu)
  widget.setCustomData([
    {"USER": {
      "NAME" : "Pierre Blanc",
      "AVATAR" : "http://files.shelenkov.com/images/avatar-ivanov.jpg",
    }},
    {"GRID": [
      {
        "NAME" : "E-mail",
        "VALUE" : "pierre@blanc.fr",
        "DISPLAY" : "LINE",
      },
      {
        "NAME" : "Code client",
        "VALUE" : "12234",
        "COLOR" : "#ff0000",
        "DISPLAY" : "LINE"
      },
      {
        "NAME": "Site",
        "VALUE": location.hostname,
        "DISPLAY": "LINE"
      },
      {
        "NAME": "Page",
        "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
        "DISPLAY": "LINE"
      },
    ]}
  ]);
  
});
</script>

Pour publier les données au format texte, vous pouvez utiliser une construction simplifiée. Les balises HTML peuvent être utilisées dans le texte : BR, B, U, I, S, URL.

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  widget.setCustomData("[b]Pierre Blanc[/b] (pierre@blanc.fr)");

});
</script>
Pour plus d'informations sur les blocs et leur utilisation, consultez le cours Bitrix24 Bot Platform.

3. Gestion des événements

<script type="text/javascript"> 
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  // Gestion des événements  
  widget.subscribe({
    type: BX.LiveChatWidget.SubscriptionType.TYPE_D'ABONNEMENT_A_UN_EVENEMENT,
    callback: function(data) {
    // toute commande
    ...
    }
  });
  
});
</script>
  • BX.LiveChatWidget.SubscriptionType.configLoaded – événement de chargement d'informations sur Canal ouvert.

  • BX.LiveChatWidget.SubscriptionType.widgetOpen – événement d'ouverture de widget.

  • BX.LiveChatWidget.SubscriptionType.widgetClose – événement de fermeture du widget.

  • BX.LiveChatWidget.SubscriptionType.sessionStart – événement de début de session.
    Exemple de résultat :
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.sessionOperatorChange – événement de changement d'agent.
    Exemple de résultat :
    {operator: {name: '',firstName: '',lastName: '',workPosition: '',avatar: '',online: false}}
  • BX.LiveChatWidget.SubscriptionType.sessionFinish – événement de fin de session.
    Exemple de résultat :
    {sessionId: 123}
  • BX.LiveChatWidget.SubscriptionType.operatorMessage – événement de message d'agent.
    Exemple de résultat :
    {id:"44609041",chatId:711773,senderId:1246,recipientId:"chat711773",date:"2018-11-22T20:17:57.000Z",text:"salut!"}
  • BX.LiveChatWidget.SubscriptionType.userForm – événement de remplissage de formulaire par l'utilisateur.
    Exemple de résultat :
    {form: "welcome", fields: {name: "", phone: "", email: ""}} // welcome|offline|history
  • BX.LiveChatWidget.SubscriptionType.userMessage – événement de message d'utilisateur.
    Exemple de résultat :
    {id: 123, text: ''}
  • BX.LiveChatWidget.SubscriptionType.userVote – événement de vote par l'utilisateur.
    Exemple de résultat :
    {vote: "like"} // like|dislike
  • BX.LiveChatWidget.SubscriptionType.every – événement dans lequel vous pouvez afficher les résultats de tous les événements en même temps.
    L'appel de l'événement every est légèrement différent de ce qui précède :
    <script type="text/javascript"> 
    window.addEventListener('onBitrixLiveChat', function(event)
    {
      var widget = event.detail.widget;
    
      widget.subscribe({
        type: BX.LiveChatWidget.SubscriptionType.every,
        callback: function(event) {
          if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)
          {
            widget.open();
          }
        }
      });
      
    });
    </script>
    Exemple de résultat :
    {type: "userVote", data: {vote: "like"}}

    Dans type, le code de l'événement vous sera transmis, dans data - les données de l'événement, des exemples de ces données sont indiqués ci-dessus pour chaque événement.


Votre code JavaScript final peut être composé de 3 parties selon vos besoins.

Exemple :

<script type="text/javascript">

window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;
  
  // Installation d'une autorisation d'utilisateur externe 
  widget.setUserRegisterData({
    'hash': '12b42ebcec7e3c26a313272c26efddbd',
    'name': 'Pierre',
    'lastName': 'Blanc',
    'avatar': 'http://files.shelenkov.com/images/avatar-ivanov.jpg',
    'email': 'pierre@blanc.fr',
    'gender': 'M',
    'position': 'Utilisateur d'honneur'
  }); 

  // Installation de données supplémentaires (publiées en début de nouvelle session, format étendu)
  widget.setCustomData([
    {"USER": {
      "NAME" : "Pierre Blanc",
      "AVATAR" : "http://files.shelenkov.com/images/avatar-ivanov.jpg",
    }},
    {"GRID": [
      {
        "NAME" : "E-mail",
        "VALUE" : "pierre@blanc.fr",
        "DISPLAY" : "LINE",
      },
      {
        "NAME" : "Code client",
        "VALUE" : "12234",
        "COLOR" : "#ff0000",
        "DISPLAY" : "LINE"
      },
      {
        "NAME": "Site",
        "VALUE": location.hostname,
        "DISPLAY": "LINE"
      },
      {
        "NAME": "Page",
        "VALUE": "[url="+location.href+"]"+(document.title || location.href)+"[/url]",
        "DISPLAY": "LINE"
      },
    ]}
  ]);
    
  widget.subscribe({
    type: BX.LiveChatWidget.SubscriptionType.every,
    callback: function(event) {
      if (event.type == BX.LiveChatWidget.SubscriptionType.configLoaded)
      {
        widget.open();
      }
    }
  }); 
  
});
</script>

4. Modifier les phrases par défaut dans le widget du site web

Parfois, vous devrez peut-être modifier les phrases standard affichées dans la fenêtre du widget.

Cela peut être fait en utilisant le code Javascript :

<script>
window.addEventListener('onBitrixLiveChat', function(event)
{
  var widget = event.detail.widget;

  widget.subscribe({
    type: BX.LiveChatWidget.SubscriptionType.configLoaded,
    callback: function() 
    {
      widget.addLocalize({VARIABLE_PHRASE : 'Texte à remplacer'});       
    }
  });
  
});
</script>

La liste complète de toutes les phrases variables est appelée avec la commande suivante dans la console du navigateur :

console.table(BXLiveChat.__privateMethods__.localize);
Pour en savoir plus, lisez l’article - Personnaliser les phrases utilisées dans le widget du site web.

5. Masquer le formulaire de contact

Vous pouvez masquer le formulaire de contact dans le chat en direct. L'astuce suivante vous y aidera - une méthode de mutation de widget :

<script>
window.addEventListener('onBitrixLiveChat', function(event)
{
 var widget = event.detail.widget;
 widget.mutateTemplateComponent('bx-livechat-form-welcome', { template: '<div></div>' });
});
</script>

Pour les développeurs

Vous pouvez personnaliser l'un des composants présents ici : imopenlines/install/js/imopenlines/component/widget/src/component/

Veuillez noter qu'après la personnalisation, vous devrez suivre les modifications apportées à ces composants et maintenir vos modifications à jour.

6. Désactiver la vérification supplémentaire de la configuration multisites pour un widget

Lorsque vous utilisez l'autorisation de bout en bout entre le site Bitrix24 et le compte Bitrix24 dans une configuration multisite sur le même noyau et sur le sous-domaine du domaine principal, l'autorisation de l'utilisateur est réinitialisée.

Pour éviter de réinitialiser l'autorisation, vous devez effectuer certains réglages.

Par défaut, la vérification de la configuration multisite pour le widget Bitrix24 est activée dans le module Canaux ouverts (imopenlines) depuis la version 21.400.0. Si une telle configuration est trouvée, une notification sera affichée dans le widget.

Ce code désactive la vérification :

<script>
window.addEventListener('onBitrixLiveChat', function(event){
  var widget = event.detail.widget;
  widget.setOption('checkSameDomain', false);
    });
</script>
Ces informations ont-elles été utiles ?
Assistance d'un spécialiste
Ce n'est pas ce que je recherche
Texte compliqué et incompréhensible
Les informations sont obsolètes
Trop court, j'ai besoin de plus d'informations
Je n'aime pas comment cet outil fonctionne
Aller sur Bitrix24
Vous n'avez pas de compte ? Créez-en un gratuitement