Guide d'utilisation avancée du site web

Le canal Website prend en charge des options de configuration supplémentaires via l'interface LiveDesk Widget SDK ou l'utilisation d'une iframe, afin de répondre à différents besoins utilisateurs.

Paramètres liés à l'iframe

Ignorer l'écran d'accueil

En mode iframe, les utilisateurs peuvent ignorer l'écran d'accueil lors de l'ouverture de la bulle en ajoutant le paramètre action=autoStart, ce qui les amène directement à la boîte de dialogue pour démarrer une conversation.

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // Remplacez website_token par la valeur correspondante générée après la création du canal title="Live desk" allow="camera;microphone" />
              
              <iframe
    class="livedesk-widget-iframe"
    src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // Remplacez website_token par la valeur correspondante générée après la création du canal
    title="Live desk"
    allow="camera;microphone"
/>

            
Afficher ce bloc de code dans la fenêtre flottante

Définir l'ID utilisateur

Deux méthodes de configuration sont disponibles :

Méthode 1 :

Array.from(document.getElementsByTagName('iframe')) .filter((iframe) => iframe.src && iframe.src.includes('livedesk')) .forEach((iframe) => iframe.contentWindow?.postMessage( 'livedesk-widget:' + JSON.stringify({ event: 'set-user', identifier: 'your_user_id', user: { name: 'Display Name', email: 'user@example.com' }, }), '*', ), );
              
              Array.from(document.getElementsByTagName('iframe'))
.filter((iframe) => iframe.src && iframe.src.includes('livedesk'))
.forEach((iframe) =>
iframe.contentWindow?.postMessage(
'livedesk-widget:' +
JSON.stringify({
event: 'set-user',
identifier: 'your_user_id',
user: { name: 'Display Name', email: 'user@example.com' },
}),
'*',
),
);

            
Afficher ce bloc de code dans la fenêtre flottante

Méthode 2 : ajoutez le paramètre user_id=xxxxx à l'iframe.

<iframe class="livedesk-widget-iframe" src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002" title="LiveDesk" allow="camera;microphone" />
              
              <iframe
  class="livedesk-widget-iframe"
  src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002"
  title="LiveDesk"
  allow="camera;microphone"
/>

            
Afficher ce bloc de code dans la fenêtre flottante

Interface LiveDesk Widget SDK

Définir l'ID utilisateur et les informations utilisateur (mode standard)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUserId("ID utilisateur unique (tel que 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", // Facultatif phone_number: "+1234567890" // Facultatif }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUserId("ID utilisateur unique (tel que 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",  // Facultatif
    phone_number: "+1234567890"  // Facultatif
  });
});

            
Afficher ce bloc de code dans la fenêtre flottante
Remarque : si la définition de l'ID utilisateur dans la configuration est déclenchée par l'utilisateur final, vous pouvez supprimer l'encapsulation de l'événement window.addEventListener("livedesk:ready", function ()).

Définir l'ID utilisateur et les informations utilisateur (mode chiffré)

Activer l'authentification (recommandé) : pour empêcher toute falsification et garantir la persistance de la session entre navigateurs, activez HMAC dans la configuration (utilisez SHA256 pour générer identifier_hash). Exemple (JavaScript) :

const crypto = require('crypto'); const key = 'Your HMAC Token'; // Copiez depuis les paramètres de la boîte de réception const message = 'Unique user ID'; const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex'); // Joindre dans setUser window.$livedesk.setUserId("Unique user ID", { ...Other information, identifier_hash: identifier_hash });
              
              const crypto = require('crypto');
const key = 'Your HMAC Token';  // Copiez depuis les paramètres de la boîte de réception
const message = 'Unique user ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');

// Joindre dans setUser
window.$livedesk.setUserId("Unique user ID", {
  ...Other information,
  identifier_hash: identifier_hash
});

            
Afficher ce bloc de code dans la fenêtre flottante

Définir des variables personnalisées de conversation

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // Exemple : UTM au niveau de la conversation session_type: "support" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // Exemple : UTM au niveau de la conversation
  session_type: "support"
});

            
Afficher ce bloc de code dans la fenêtre flottante
  • Ces variables personnalisées s'affichent dans LiveDesk - Conversation - Conversation Info.

Définir des variables personnalisées utilisateur

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // key : identifiant unique prédéfini ; value : à définir selon le type (par exemple chaîne de caractères) signup_date: new Date(), // Exemple : type date account_id: 123 // Exemple : type numérique }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setCustomAttributes({
    pricing_plan: "premium",  // key : identifiant unique prédéfini ; value : à définir selon le type (par exemple chaîne de caractères)
    signup_date: new Date(),  // Exemple : type date
    account_id: 123           // Exemple : type numérique
  });
});

            
Afficher ce bloc de code dans la fenêtre flottante
  • Ces variables personnalisées s'affichent dans LiveDesk - Conversation - Contact Attributes.

Supprimer des attributs utilisateur

Supprime l'attribut personnalisé spécifié.

window.$livedesk.deleteCustomAttribute("pricing_plan"); // Nom de clé de l'attribut de type chaîne
              
              window.$livedesk.deleteCustomAttribute("pricing_plan"); // Nom de clé de l'attribut de type chaîne

            
Afficher ce bloc de code dans la fenêtre flottante

Basculer l'état d'ouverture de la bulle de discussion

Bascule l'état ouvert/fermé du widget.

window.$livdesk.toggle(); // Basculer le widget en transmettant un é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 transmettant un é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 discussion

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

            
Afficher ce bloc de code dans la fenêtre flottante

Mode pop-out

Ouvre l'interface de chat en mode fenêtre détachée.

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 de langue sous forme de chaîne, par exemple : zh-CN
              
              window.$livedesk.setLocale("en"); // Code de langue sous forme de chaîne, par exemple : zh-CN

            
Afficher ce bloc de code dans la fenêtre flottante

Ajouter/Supprimer des labels

Ajoutez des labels à la session en cours (avant le début de la conversation). Les labels seront automatiquement appliqués à la conversation.

window.$livdesk.setLabel('support-ticket'); // Identifiant du label sous forme de chaîne window.$livdesk.removeLabel('support-ticket');
              
              window.$livdesk.setLabel('support-ticket'); // Identifiant du label sous forme de chaîne
window.$livdesk.removeLabel('support-ticket');

            
Afficher ce bloc de code dans la fenêtre flottante

Objet de configuration LiveDesk Widget

Objet global défini lors de l'initialisation (avant le chargement du SDK) afin de personnaliser le comportement du widget. Définissez-le via window.livedeskSettings, puis transmettez-le à window.livedeskSDK.run().

Propriétés de l'objet

Property Name Type Description Default Value Example
hideMessageBubble boolean Masque la bulle de message. false true
showUnreadMessagesDialog boolean Affiche la boîte de dialogue des messages non lus. true false
position string Position du widget. 'right' 'left'
locale string Code de langue par défaut. Langue du tableau de bord 'zh-CN'
useBrowserLanguage boolean Utilise la langue du navigateur (ignore locale). false true
type string Type du widget. 'standard' 'expanded_bubble'
darkMode boolean Active le mode sombre. false true
baseDomain string Domaine de base (facultatif, pour plusieurs domaines). - 'example.com'
launcherTitle string Titre du lanceur. - 'Support'
showPopoutButton boolean Affiche le bouton pop-out. true false
welcomeTitle string Titre d'accueil. - 'Welcome!'
welcomeDescription string Description d'accueil. - 'How can we help you?'
availableMessage string Message en ligne. - 'We are online.'
unavailableMessage string Message hors ligne. - 'We will reply later.'
enableFileUpload boolean Active le téléversement de fichiers. true false
enableEmojiPicker boolean Active le sélecteur d'émojis. true false
enableEndConversation boolean Active le bouton de fin de conversation. true false

Exemple de code

<script> // 1. Avant de charger sdk.js, définissez d'abord la configuration globale (doit être placée 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é (le widget affichera le chinois même si le navigateur est en anglais) locale: "zh-CN", // Détecter automatiquement la langue du navigateur (si vous souhaitez donner la priorité à la langue du navigateur de l'utilisateur, définissez sur true et supprimez locale ci-dessus) // useBrowserLanguage: true, // Type de widget : expanded_bubble = grande bulle (avec message d'accueil), standard = petite bulle classique type: "expanded_bubble", // Mode sombre (suivre automatiquement le système ou forcer le mode sombre) darkMode: "auto", // Valeurs facultatives : true | false | "auto" // Masquer la petite icône de bulle en bas (adapté à un placement dans un bouton personnalisé) hideMessageBubble: false, // Masquer le bouton flèche "fenêtre détachée" dans le coin inférieur droit showPopoutButton: false, // Titre personnalisé du lanceur (affiché en mode grande bulle) launcherTitle: "Online Support", // Message d'accueil (prend effet en mode expanded_bubble) welcomeTitle: "Hello! How can we help you?", welcomeDescription: "We usually reply within a few minutes.", // Texte d'invite affiché en ligne/hors ligne availableMessage: "We are online and ready to assist you at any time", unavailableMessage: "We are currently offline and will reply as soon as possible during business hours", // Commutateurs de fonctionnalités enableFileUpload: true, // Autoriser le téléversement de fichiers enableEmojiPicker: true, // Autoriser l'utilisation des émojis enableEndConversation: true, // Autoriser les utilisateurs à mettre fin à la conversation de manière proactive // Autres options avancées (activez selon vos besoins) // showUnreadMessagesDialog: true, // Rappel contextuel lorsqu'il y a des messages non lus (par défaut : true) // baseDomain: "yourcompany.com", // Utilisé pour le déploiement sur plusieurs domaines }; </script> <!-- 2. Charger le LiveDesk Widget SDK (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. Avant de charger sdk.js, définissez d'abord la configuration globale (doit être placée 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é (le widget affichera le chinois même si le navigateur est en anglais)
  locale: "zh-CN",

  // Détecter automatiquement la langue du navigateur (si vous souhaitez donner la priorité à la langue du navigateur de l'utilisateur, définissez sur true et supprimez locale ci-dessus)
  // useBrowserLanguage: true,

  // Type de widget : expanded_bubble = grande bulle (avec message d'accueil), standard = petite bulle classique
  type: "expanded_bubble",

  // Mode sombre (suivre automatiquement le système ou forcer le mode sombre)
  darkMode: "auto",        // Valeurs facultatives : true | false | "auto"

  // Masquer la petite icône de bulle en bas (adapté à un placement dans un bouton personnalisé)
  hideMessageBubble: false,

  // Masquer le bouton flèche "fenêtre détachée" dans le coin inférieur droit
  showPopoutButton: false,

  // Titre personnalisé du lanceur (affiché en mode grande bulle)
  launcherTitle: "Online Support",

  // Message d'accueil (prend effet en mode expanded_bubble)
  welcomeTitle: "Hello! How can we help you?",
  welcomeDescription: "We usually reply within a few minutes.",

  // Texte d'invite affiché en ligne/hors ligne
  availableMessage: "We are online and ready to assist you at any time",
  unavailableMessage: "We are currently offline and will reply as soon as possible during business hours",

  // Commutateurs de fonctionnalités
  enableFileUpload: true,       // Autoriser le téléversement de fichiers
  enableEmojiPicker: true,      // Autoriser l'utilisation des émojis
  enableEndConversation: true,  // Autoriser les utilisateurs à mettre fin à la conversation de manière proactive

  // Autres options avancées (activez selon vos besoins)
  // showUnreadMessagesDialog: true,   // Rappel contextuel lorsqu'il y a des messages non lus (par défaut : true)
  // baseDomain: "yourcompany.com",    // Utilisé pour le déploiement sur plusieurs domaines
};

</script>

<!-- 2. Charger le LiveDesk Widget SDK (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

Écouteurs d'événements LiveDesk Widget

Event Name Description Listener Example
livedesk:ready Déclenché lorsque le SDK est entièrement chargé et que les méthodes peuvent être appelées en toute sécurité. window.addEventListener('livedesk:ready', () => { /* Initialisation */ });
livedesk:on-message Déclenché lorsqu'un nouveau message est reçu. window.addEventListener('livedesk:on-message', (data) => { console.log(data); });
livedesk:error Déclenché lorsqu'une erreur du SDK se produit (v2.3.0+). window.addEventListener('livedesk:error', (error) => { console.error(error); });
Icon Solid Transparent White Qiyu
Contactez-nous