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"
/>
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' },
}),
'*',
),
);
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"
/>
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 ()).
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
});
Définir des variables personnalisées de conversation
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // Exemple : UTM au niveau de la conversation
session_type: "support"
});
- 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
});
});
- 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
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
Afficher/Masquer la bulle de discussion
window.$livedesk.toggleBubbleVisibility('hide'); // afficher/masquer
Mode pop-out
Ouvre l'interface de chat en mode fenêtre détachée.
window.$livedesk.popoutChatWindow();
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
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');
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>
É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); }); |










