Guide avancé du site web
Le canal site web prend en charge davantage de configurations basées sur l'interface SDK du Widget LiveDesk afin de répondre aux besoins des utilisateurs.
Interface SDK du Widget LiveDesk
Définir l'Userid et les informations utilisateur (mode normal)
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setUserId("ID utilisateur unique (ex. user_id)", { // Le premier paramètre est l'identifiant unique
email: "user@example.com",
name: "Nom de l'utilisateur",
avatar_url: "https://example.com/avatar.jpg", // Optionnel
phone_number: "+1234567890" // Optionnel
});
});
Définir l'Userid et les informations utilisateur (mode chiffré)
Activer l'authentification (recommandé) : pour éviter la falsification et garantir la persistance de la session entre navigateurs, activez HMAC dans la configuration (utilisez SHA256 pour générer l'identifier_hash). Exemple (JavaScript) :
const crypto = require('crypto');
const key = 'Votre jeton HMAC'; // À copier depuis les paramètres des Inboxes
const message = 'ID utilisateur unique';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');
// À inclure dans setUser
window.$livedesk.setUserId("ID utilisateur unique", {
...autres infos,
identifier_hash: identifier_hash
});
Définir les "Attributs personnalisés de la conversation"
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // Exemple : UTM au niveau de la session
session_type: "support"
});
- Ces variables personnalisées sont affichées dans Livedesk - Conversation - Informations de la conversation.
Définir les "Attributs personnalisés du contact"
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setCustomAttributes({
pricing_plan: "premium", // clé : identifiant unique prédéfini, valeur : à définir selon le type (ex : chaîne)
signup_date: new Date(), // Exemple : type date
account_id: 123 // Exemple : type nombre
});
});
- Ces variables personnalisées sont affichées dans "Livedesk - Conversation - Attributs du contact".
Supprimer un attribut utilisateur
Supprime l'attribut personnalisé spécifié.
window.$livedesk.deleteCustomAttribute("pricing_plan");//nom de la clé d'attribut de type chaîne
Basculer l'état d'ouverture de la bulle de chat
Bascule l'état ouvert/fermé du widget.
window.$livdesk.toggle();
// Basculer le widget en passant l'état
window.$livedesk.toggle("open"); // Ouvrir le widget de chat
window.$livedesk.toggle("close"); // Fermer le widget de chat
Afficher/Masquer la bulle de chat
window.$livedesk.toggleBubbleVisibility('hide');// afficher/masquer
Mode Popout
Ouvre l'interface de chat en mode fenêtre popout.
window.$livedesk.popoutChatWindow();
Définir la langue
Définit la langue du widget
window.$livedesk.setLocale("en");// code langue chaîne, exemple : zh-CN
Ajouter/Supprimer des étiquettes
Ajoute une étiquette à la conversation en cours (avant le début de la conversation), l'étiquette sera automatiquement appliquée à la conversation
window.$livdesk.setLabel('support-ticket');// identifiant d'étiquette chaîne
window.$livdesk.removeLabel('support-ticket');
Objet de configuration du Widget Livedesk
Objet global défini lors de l'initialisation (avant le chargement du SDK) pour personnaliser le comportement du widget. Défini via window.livedeskSettings puis transmis à window.livedeskSDK.run().
Propriétés de l'objet
| Nom de la propriété | Type | Description | Valeur par défaut | Exemple |
|---|---|---|---|---|
hideMessageBubble |
booléen | Masquer la bulle de message. | false | true |
showUnreadMessagesDialog |
booléen | Afficher la boîte de dialogue des messages non lus. | true | false |
position |
chaîne | Position du widget. | 'right' | 'left' |
locale |
chaîne | Code langue par défaut. | Langue du tableau de bord | 'zh-CN' |
useBrowserLanguage |
booléen | Utiliser la langue du navigateur (ignore locale). |
false | true |
type |
chaîne | Type de widget. | 'standard' |
'expanded_bubble' |
darkMode |
booléen | Activer le mode sombre. | false | true |
baseDomain |
chaîne | Domaine de base (optionnel, pour multi-domaine). | - | 'example.com' |
launcherTitle |
chaîne | Titre du lanceur. | - | 'Support' |
showPopoutButton |
booléen | Afficher le bouton popout. | true | false |
welcomeTitle |
chaîne | Titre de bienvenue. | - | 'Bienvenue !' |
welcomeDescription |
chaîne | Description de bienvenue. | - | 'Comment pouvons-nous vous aider ?' |
availableMessage |
chaîne | Message en ligne. | - | 'Nous sommes en ligne.' |
unavailableMessage |
chaîne | Message hors ligne. | - | 'Nous vous répondrons plus tard.' |
enableFileUpload |
booléen | Activer le téléchargement de fichiers. | true | false |
enableEmojiPicker |
booléen | Activer le sélecteur d'emojis. | true | false |
enableEndConversation |
booléen | Activer le bouton de fin de conversation. | true | false |
Exemple de code
<script>
// 1. Définir la configuration globale avant de charger sdk.js (doit être placé tout au début du script)
window.livedeskSettings = {
// Position du widget : en bas à gauche (par défaut en bas à droite)
position: "left",
// Forcer la langue en chinois simplifié (affichera le chinois même si le navigateur est en anglais)
locale: "zh-CN",
// Détection automatique de la langue du navigateur (si vous souhaitez privilégier la langue du navigateur de l'utilisateur, mettez true et supprimez locale ci-dessus)
// useBrowserLanguage: true,
// Type de widget : expanded_bubble = grande bulle (avec message de bienvenue), standard = petite bulle classique
type: "expanded_bubble",
// Mode sombre (auto suivre le système ou forcer le mode sombre)
darkMode: "auto", // Valeurs possibles : true | false | "auto"
// Masquer l'icône de la petite bulle en bas (adapté pour placer dans des boutons personnalisés)
hideMessageBubble: false,
// Masquer le petit bouton flèche "popout window" en bas à droite
showPopoutButton: false,
// Titre personnalisé du lanceur (affiché en mode bulle étendue)
launcherTitle: "Support en ligne",
// Message de bienvenue (valable en mode expanded_bubble)
welcomeTitle: "Bonjour ! Comment pouvons-nous vous aider ?",
welcomeDescription: "Nous répondons généralement en quelques minutes~",
// Texte d'invite affiché en ligne/hors ligne
availableMessage: "Nous sommes en ligne, prêts à vous servir",
unavailableMessage: "Nous sommes actuellement hors ligne, nous répondrons dès que possible pendant les heures ouvrées",
// Boutons de fonctionnalités
enableFileUpload: true, // Autoriser le téléchargement de fichiers
enableEmojiPicker: true, // Autoriser l'utilisation d'emojis
enableEndConversation: true, // Permettre à l'utilisateur de mettre fin à la conversation
// Autres options avancées (à activer si besoin)
// showUnreadMessagesDialog: true, // Pop-up de rappel en cas de messages non lus (par défaut true)
// baseDomain: "yourcompany.com", // À utiliser pour un déploiement multi-domaine
};
</script>
<!-- 2. Charger le SDK du Widget livedesk (remplacez par votre propre domaine et token) -->
<script>
(function(d,t) {
var BASE_URL="https://www.engagelab.com"; // ← Remplacez par votre adresse livedesk
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.livedeskSDK.run({
websiteToken: 'abcdefgh1234567890abcdefgh123456', // ← Remplacez par votre Website Token
baseUrl: BASE_URL
});
}
})(document,"script");
</script>
Écoute des événements du Widget Livedesk
| Nom de l'événement | Description | Exemple d'écoute |
|---|---|---|
livedesk:ready |
SDK entièrement chargé, il est possible d'appeler les méthodes. | window.addEventListener('livedesk:ready', () => { /* Initialisation */ }); |
livedesk:on-message |
Déclenché à la réception d'un nouveau message. | window.addEventListener('livedesk:on-message', (data) => { console.log(data); }); |
livedesk:error |
Déclenché lorsqu'une erreur SDK survient (v2.3.0+). | window.addEventListener('livedesk:error', (error) => { console.error(error); }); |

