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>
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|historyBX.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|dislikeBX.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énementeveryest légèrement différent de ce qui précède :
<script type="text/javascript">
Exemple de résultat :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>{type: "userVote", data: {vote: "like"}}Dans
type, le code de l'événement vous sera transmis, dansdata- 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);
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>