logoDocumentation
Rechercher

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

            
Afficher ce bloc de code dans la fenêtre flottante

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

            
Afficher ce bloc de code dans la fenêtre flottante

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" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // Exemple : UTM au niveau de la session
  session_type: "support"
});

            
Afficher ce bloc de code dans la fenêtre flottante
  • 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 }); });
              
              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
  });
});

            
Afficher ce bloc de code dans la fenêtre flottante
  • 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
              
              window.$livedesk.deleteCustomAttribute("pricing_plan");//nom de la clé d'attribut de type chaîne

            
Afficher ce bloc de code dans la fenêtre flottante

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
              
              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 ce bloc de code dans la fenêtre flottante

Afficher/Masquer la bulle de chat

window.$livedesk.toggleBubbleVisibility('hide');// afficher/masquer
              
              window.$livedesk.toggleBubbleVisibility('hide');// afficher/masquer

            
Afficher ce bloc de code dans la fenêtre flottante

Mode Popout

Ouvre l'interface de chat en mode fenêtre popout.

window.$livedesk.popoutChatWindow();
              
              window.$livedesk.popoutChatWindow();

            
Afficher ce bloc de code dans la fenêtre flottante

Définir la langue

Définit la langue du widget

window.$livedesk.setLocale("en");// code langue chaîne, exemple : zh-CN
              
              window.$livedesk.setLocale("en");// code langue chaîne, exemple : zh-CN

            
Afficher ce bloc de code dans la fenêtre flottante

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');
              
              window.$livdesk.setLabel('support-ticket');// identifiant d'étiquette chaîne
window.$livdesk.removeLabel('support-ticket');

            
Afficher ce bloc de code dans la fenêtre flottante

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

            
Afficher ce bloc de code dans la fenêtre flottante

É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); });
icon
Contactez-nous