API JavaScript Live Chat
Utilisez l'API JavaScript onWebChat pour personnaliser votre widget de chat et automatiser les flux. Vous pouvez transmettre les données du visiteur, définir la langue du widget, maximiser ou masquer le widget et plus encore.
Par exemple, vous pouvez envoyer les détails du visiteur au chat, définir la langue par page ou ouvrir le widget par programmation lorsqu'un utilisateur clique sur un bouton.
Ajoutez votre code API directement sous le script du widget de chat, comme indiqué à droite.
<script type='text/javascript'>
/* Paste your onWebChat widget installation snippet from the dashboard here. */
</script>
<script type='text/javascript'>
/* Add your JavaScript API calls below, for example onWebChat.set() or onWebChat.get() */
</script>
Définir les informations visiteur
Vous pouvez définir les informations du visiteur avant ou pendant une session de chat. Par exemple, définir le nom aide votre équipe à identifier les contacts dans la liste des visiteurs.
Utilisez ces appels API pour définir le nom, l'email, le téléphone et les notes du visiteur :
onWebChat.set("name","Sarah Chen");
onWebChat.set("email","sarah.chen@example.com");
onWebChat.set("phone","+1 555 010 0142");
onWebChat.set("notes","Returning visitor, requested an Enterprise trial");
Obtenir les informations visiteur
Vous pouvez lire le nom, l'e-mail, le téléphone et les notes du visiteur chaque fois que ces valeurs ont été fournies via cette API JavaScript, collectées dans le formulaire pré-chat ou mises à jour par les agents dans le tableau de bord.
Appelez ces fonctions après le chargement complet du widget. Exemple :
onWebChat.set("onWebChatLoaded", function() { console.log("visitor name: " + onWebChat.get("name")); });
onWebChat.get("name");
onWebChat.get("email");
onWebChat.get("phone");
onWebChat.get("notes");
Définir la langue du widget
Définissez la langue du widget avec le code de langue pour toute langue activée dans votre tableau de bord.
Par exemple, "fr" pour le français, "en" pour l'anglais et "es" pour l'espagnol. Si le code n'est pas activé, le widget utilise votre langue par défaut. Modifiez la langue par défaut dans Paramètres > Langues.
Codes de langue disponibles :
onWebChat.set("language","es");
Définir l'apparence du widget
Vous pouvez contrôler les principaux paramètres d'affichage du widget :
Utilisez le paramètre max avec 0 pour minimiser ou 1 pour maximiser le widget.
Pour masquer le widget, utilisez la fonction set avec le paramètre show et la valeur 0. Utilisez 1 pour l'afficher à nouveau.
onWebChat.set("max",1);
onWebChat.set("show",0);
Définir les informations de page
Vous pouvez remplacer l'URL et le titre de la page actuelle envoyés à onWebChat :
Utilisez le paramètre pageUrl pour définir une URL personnalisée visible par les agents dans la console de chat. Utile pour les applications monopages (SPA) ou le routage personnalisé.
Utilisez le paramètre pageTitle pour définir un titre personnalisé que les agents verront à la place du titre de la page du navigateur.
onWebChat.set("pageUrl","https://onwebchat.com/newPage");
onWebChat.set("pageTitle","New title");
Obtenir le statut du widget
Renvoie "online" ou "offline" selon la disponibilité actuelle de votre chat.
Appelez après le chargement du widget. Exemple :
onWebChat.set("onWebChatLoaded", function() { console.log("chat status: " + onWebChat.get("status")); });
onWebChat.get("status");
Obtenir le statut de connexion
Renvoie true si le widget de chat a une connexion socket active avec le serveur, ou false dans le cas contraire. Utile pour vérifier la connectivité avant d'effectuer des actions.
onWebChat.get("isConnected");
Obtenir l'état ouvert/fermé du widget
Renvoie true si le widget de chat est actuellement maximisé (ouvert), ou false s'il est minimisé (fermé).
onWebChat.get("isMaximized");
Obtenir l'ID du dialogue
Renvoie l'ID du dialogue actif en cours, ou 0 s'il n'y a pas de dialogue actif. Utile pour les intégrations qui doivent lier une session de chat à un CRM ou un système de tickets.
onWebChat.get("dialogId");
Envoyer un message
Vous pouvez envoyer un message de chat au nom du visiteur de manière programmatique. Utile pour créer des flux d'aide contextuels, par exemple envoyer « J'ai besoin d'aide avec ma commande » lorsqu'un visiteur clique sur un bouton d'aide.
Le message apparaîtra dans le chat comme si le visiteur l'avait tapé. Le widget doit être chargé et connecté avant l'envoi.
onWebChat.set("sendMessage","I need help with my order");
Définir le département
Vous pouvez présélectionner un département pour le visiteur selon le contexte de la page. Par exemple, diriger automatiquement les visiteurs de votre page tarifs vers « Ventes » et ceux de votre page d'aide vers « Support ».
Vous pouvez passer soit le nom du département (string) soit l'ID du département (number). Le nom doit correspondre à l'un des départements configurés dans votre tableau de bord.
onWebChat.set("department","Sales");
Fonctions Callback
Vous pouvez exécuter des fonctions callback lors d'événements spécifiques du chat :
onClick s'exécute quand le visiteur clique sur le widget de chat
onMaximize s'exécute quand le widget est maximisé
onMinimize s'exécute quand le widget est minimisé
onTrigger s'exécute quand un déclencheur est activé
onStartWriting s'exécute quand le visiteur commence à taper
onNewMessage s'exécute quand un nouveau message est envoyé ou reçu. Le callback reçoit deux arguments : le texte du message et qui l'a envoyé ("visitor", "agent" ou "bot")
onEndChat s'exécute quand le chat est terminé. Le callback reçoit un argument : qui l'a terminé ("visitor", "agent" ou "bot")
onChatStatusChange s'exécute quand le statut du widget de chat passe en ligne ou hors ligne. Le callback reçoit un argument : le nouveau statut ("online" ou "offline")
onWebChatLoaded s'exécute quand le widget de chat a fini de charger
onWebChat.set("onClick",function(){ alert('chat widget is clicked'); });
onWebChat.set("onMaximize",function(){ alert('chat maximized'); });
onWebChat.set("onMinimize",function(){ alert('chat minimized'); });
onWebChat.set("onTrigger",function(){ alert('trigger activated'); });
onWebChat.set("onStartWriting",function(){ alert('visitor is writing'); });
onWebChat.set("onNewMessage",function(msg, by){
console.log('new message by ' + by + ': ' + msg);
});
onWebChat.set("onEndChat",function(endedBy){
console.log('chat ended by ' + endedBy);
});
onWebChat.set("onChatStatusChange",function(status){
console.log('agents are now ' + status);
});
onWebChat.set("onWebChatLoaded",function(){ alert('chat widget is loaded'); });