Personnaliser le clavardage Guide à l'aide des API

Vous pouvez personnaliser l'apparence et le comportement du clavardage mis en œuvre avec Guide en utilisant ces chat-related APIs.

Appels d'API de Comportement du clavardage

Les appels de cette section vous permettent de modifier le comportement de la fenêtre de clavardage Guide.

Définir le code d’autorisation

Définit un code d'autorisation pour le flux OAuth. OAuth est un protocole d'authentification. Il vous permet de laisser une application interagir avec une autre en votre nom sans divulguer vos mots de passe. Il doit être appelé avant l’initialisation du clavardage.

cxone('chat','setAuthorizationCode', 'authorization_code');

Personnaliser le message de contact automatisé initial

Lorsqu'un clavardage démarre dans Guide, un nouveau cas La conversation complète avec un agent sur un canal. Par exemple, une interaction peut être un appel vocal, un courriel, un clavardage ou une conversation sur les réseaux sociaux. est créé et ajouté à la file d'attente lorsque le premier message de la session de clavardage est envoyé. Un message caché et automatisé est envoyé au nom du visiteur lorsque la session de clavardage commence. Cela permet de réduire le temps d’attente des visiteurs pour un agent. Bien que le message initial soit caché au contact, l’agent peut le voir.

Le message par défaut est le texte du bouton sur lequel le client clique pour démarrer la conversation. Vous pouvez personnaliser le texte du message initial automatisé de trois manières :

• Remplacez le texte du bouton par défaut.

  cxone('chat','sendFirstMessageAutomatically', 'Hello');

• Modifiez le message initial de manière dynamique.

  cxone('chat','setFirstAutomatedMessageContent', 'Hello, I have a question');

• Modifiez le texte du message sur la page Traductions.

Rendre le message automatisé initial visible pour les contacts

Si vous souhaitez que le visiteur puisse voir le message automatisé initial, ajoutez cet appel à votre script :

cxone('chat','hideFirstSentMessage', false);

Retarder la création de cas

Guide crée un nouveau cas et l'ajoute à la file d'attente lorsque le premier message de la session de clavardage est envoyé. Un message caché et automatisé est envoyé au nom du visiteur lorsque la session de clavardage commence. Cela permet de réduire le temps d’attente des visiteurs pour un agent. Les Sessions de clavardage commencent lorsqu'un visiteur clique sur l'icône de clavardage pour entamer une conversation. Bien que le message initial soit caché au visiteur, l’agent peut le voir.

Vous pouvez configurer Guide pour qu’il attende le premier message du visiteur avant de créer un cas à l’aide de cet appel :

cxone('chat','sendFirstMessageAutomatically', false);

Activer le mode jeu

Permet aux visiteurs de jouer au jeu Snake en attendant un agent.

cxone('chat','allowGameMode');

Sondage de satisfaction automatisé

Un sondage de satisfaction peut être automatiquement détecté et affiché dans une fenêtre contextuelle. Cela permet de le détecter et de l’afficher ou non.

cxone('chat','automatedSatisfactionSurveyModal', false);

Appels d'API d'Informations sur le clavardage

Ces appels vous permettent de personnaliser les informations mises à la disposition des visiteurs lors d’une session de clavardage.

Obtenir l'ID d'identité du Client

Renvoie l’identifiant unique du visiteur dans le clavardage.

cxone('chat','getCustomerIdentityId');

Définir l'ID du Client

Définit un identifiant unique pour le visiteur dans le clavardage.

cxone('chat','setCustomerId', 'customer_id');

Masquer le Compteur de File d’Attente

Le compteur de file d’attente indique à un visiteur combien de temps un agent peut l’aider en fonction du nombre de personnes dans la file d’attente de l’agent. Vous pouvez masquer le compteur de file d’attente une fois que le visiteur a été correctement acheminé vers un agent. Cela permet aux agents de supprimer des cartes client de leur boîte de réception sans que les visiteurs ne s’en aperçoivent.

cxone('chat','hideQueueCounterAfterAssignment');

Définir l'état de l'activité

Modifie le message dans la barre d'activité. Par exemple, vous pourriez l'utiliser pour communiquer votre temps de réponse pour une session de clavardage par Messagerie Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Cela peut être utile, car la messagerie de clavardage est une forme de clavardage asynchrone, de sorte que les visiteurs peuvent devoir attendre d’avoir des nouvelles d’un agent.

cxone('chat','setStatusMessage', 'We typically reply within 3 hours.');

Définir l'image de l'agent

Modifie dynamiquement l'image de l'agent affichée dans la fenêtre de clavardage. Par défaut, Guide utilise l'image dans le profil de l'agent. Lorsque vous incluez cet appel dans votre script, il utilise l'image spécifiée par l'URL dans l'extrait de code (snippet). Remplacez l'exemple d'URL par l'URL de l'image que vous souhaitez que le clavardage utilise.

cxone('chat','setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

Définir le nom du Client

Le Nom du client est un champ du formulaire de sondage pré-contact, que les visiteurs doivent remplir avant de clavarder avec un agent sur un canal de messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Cet Appel API remplit dynamiquement le champ.

cxone('chat','setCustomerName', 'Elizabeth');

Définir le Format de dates

Définit le format de la date au format absolu (01/01/2022) ou au format relatif (aujourd’hui, lundi).

cxone('chat','setDateFormat', 'date_format');

Définir Paramètres régionaux

Définit les paramètres régionaux pour les traductions dans la fenêtre de clavardage.

cxone('chat','setLocale', 'locale');

Afficher les Informations sur le cas

Uniquement pour les canaux de clavardage par Messagerie Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Affiche les informations du dossier au visiteur.

cxone('chat','showCaseInfo');

Afficher/Masquer le bouton Envoyer la transcription

Si vous rendez visible le bouton Envoyer la transcription, vous devez configurer le canal de clavardage pour permettre aux contacts de s’envoyer la transcription du clavardage. Configurez cette option pour la messagerie de clavardage ou le clavardage en direct.

cxone('chat','showSendTranscript');

cxone('chat','hideSendTranscript');

Afficher/Masquer les messages Système

Affiche ou masque les messages système comme l'historique d'affectation des agents.

cxone('chat','showSystemMessages');

cxone('chat','hideSystemMessages');

Conditions d'utilisation

Permet de mettre un document de conditions d’utilisation à la disposition des visiteurs à partir de la fenêtre de clavardage. Cette fonction ajoute un bouton à la fenêtre. Vous pouvez personnaliser l’étiquette et le style du bouton, ainsi que ce qui se passe lorsque les visiteurs cliquent dessus. L’action au clic peut afficher les conditions d’utilisation sous la forme d’une fenêtre interne ou d’un lien externe.

Une fenêtre interne :

cxone('chat','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

Un lien externe :

cxone('chat','showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

Pour désactiver la fonctionnalité :

cxone('chat','hideTermsOfUse');

Champs personnalisés, Étiquettes et Phrases

Créer et Remplir des Champs personnalisés

Avant d'utiliser les Appels API des champs personnalisés ci-dessous, vous devez d'abord créer le champ personnalisé dans NiCE CXone. Créez le champ personnalisé pour un Customer Card ou un Contact, selon le type de champ personnalisé que vous souhaitez remplir via l'API.

La valeur ident que vous attribuez au champ personnalisé lors de sa création est la même valeur que vous utiliserez en référence dans l'Appel API. Si le champ personnalisé n'existe pas dans la plateforme, l'Appel API n'aura aucun effet.

Pour obtenir des instructions étape par étape sur la création de champs personnalisés, consultez Gérer les Champs personnalisés.

Utilisez l'API JavaScript de clavardage CXone Digital pour capturer les données de votre page Web et les stocker en tant que valeur de champ personnalisé. Cela vous permet de transmettre automatiquement des informations contextuelles, telles que la page sur laquelle se trouve le visiteur, son ID de compte ou toute autre donnée pertinente directement dans NiCE CXone lorsqu'une interaction de clavardage commence.

Il existe deux méthodes API disponibles, selon l'endroit où vous souhaitez que les données du champ personnalisé soient stockées :

• setContactCustomField — Stocke la valeur du champ personnalisé sur le Contact, qui représente une seule interaction ou conversation. Utilisez cette méthode lorsque les données sont propres à cette session de clavardage particulière. Par exemple, l'url de la page où le clavardage a été initié, un produit sélectionné ou un numéro de référence de formulaire.

  Lorsque vous utilisez setCaseCustomField, il se peut que vous voyiez un avertissement de dépréciation dans la console du navigateur suggérant d'utiliser setContactCustomField à la place.

• setCustomerCustomField — Stocke la valeur du champ personnalisé sur le Customer Card, qui représente le profil du contact dans toutes les interactions. Utilisez cette méthode lorsque les données sont liées au Client lui-même. Par exemple, son ID de compte, son niveau d’adhésion ou sa langue préférée.

Vue d’ensemble de l’implémentation

Le tableau suivant résume les méthodes API disponibles pour définir les valeurs des champs personnalisés. Consultez les exemples de code détaillés sous le tableau pour obtenir des conseils sur l’implémentation.

Exemple	Méthode API	la description
Définir un seul champ personnalisé de contact	setContactCustomField	Pour remplir un champ Cas à la fois.
Définir plusieurs champs personnalisés de contact en même temps	setContactCustomFields	Mise à jour groupée efficace de plusieurs champs Cas.
Définir un seul champ personnalisé Customer Card	setCustomerCustomField	Pour les champs de profil Customer Card.
Définir plusieurs champs personnalisés Customer Card en même temps	setCustomerCustomFields	Mise à jour en bloc de plusieurs champs Customer Card.
Exemple de valeur statique	setContactCustomField	Valeur codée en dur, par exemple, 'Contact Us Page'.
Exemple de valeur dynamique	setContactCustomField	Valeur dynamique, par exemple, window.location.href.

Les valeurs de champ personnalisé peuvent être définies de deux façons :

Statique — La valeur est codée en dur directement dans l'Appel API. Ceci est utile lorsque la valeur est toujours la même pour une Page donnée, par exemple pour indiquer sur quelle Page se trouve le widget de clavardage.

• Pour définir la valeur d'un seul champ personnalisé de contact

  cxone('chat','setContactCustomField', 'pagesource', 'Contact Us Page');

• Pour définir la valeur de Plus qu'un champ personnalisé de contact

  cxone('chat','setContactCustomFields',
  
     {
  
     customFieldIdent: 'value',
  
     secondCustomFieldIdent: 'value'
  
     } 
  
     );
  
   

• Pour définir la valeur d'un seul champ Customer Card

  cxone('chat','setCustomerCustomField', 'email', 'leia@starwars.com');

• Pour définir la valeur de Plus qu'un champ Customer Card

  cxone('chat','setCustomerCustomFields',
  
     {
  
     customFieldIdent: 'value',
  
     secondCustomFieldIdent: 'value'
  
     } 
  
     );
  
   

• dynamique — La valeur est extraite de la page Web au moment de l'exécution à l'aide de JavaScript. Ceci est utile lorsque la valeur varie selon le visiteur ou la session, par exemple pour capturer l'url de la page actuelle ou l'id d'un utilisateur connecté.

  cxone('chat','setContactCustomField', 'currentPage', window.location.href);

  Visualiser l’image

  

  

Pour définir la valeur d'un champ personnalisé Customer Card :

cxone('chat','setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Les champs personnalisés sont limités à 1024 caractères.

Ajoutez les Appels API du champ personnalisé au même bloc de script où le widget Guide est intégré sur votre page Web. Placez les Appels API juste au-dessus de la balise de fermeture </script>, après le code d'initialisation du widget. Par exemple :

<script>

   // CXone widget initialization code

   cxone('guide', 'init');

   // Add custom field API calls here

   cxone('chat', 'setCaseCustomField', 'pageSource', 'Contact Us Page');

   cxone('chat', 'setCustomerCustomField', 'accountTier', 'Premium');

   </script>

Pour obtenir des instructions détaillées sur l'intégration du widget et l'emplacement des appels de personnalisation, consultez Personnaliser Guide à l'aide de JavaScript.

Personnaliser les Étiquettes et les phrases

Vous pouvez personnaliser un grand nombre d’étiquettes et de phrases que le clavardage Guide utilise, ainsi que définir les personnalisations. Si vous devez modifier dynamiquement les phrases ou les étiquettes d'écran, utilisez ces appels d'API.

Pour modifier un seul message ou étiquette :

cxone('chat','setTranslation', 'key', 'your translation');

Pour modifier plusieurs messages ou étiquettes :

cxone('chat','setTranslations', {key1: 'your custom label', key2: 'your custom message'});

Appels API d'apparence de la fenêtre de clavardage

Vous pouvez modifier l’apparence de la fenêtre de clavardage utilisée par Guide.

Masquer l'Agent assigné

cxone('chat','hideAssignedAgent');

Afficher l'avatar du Client

cxone('chat','showCustomerAvatar');

Afficher le bouton Envoyer

cxone('chat','showSendButton');

Définir la limite de caractères pour la boîte de réponse

cxone('chat','setReplyBoxLimit', '280');

CSS personnalisé avec sélecteurs de données

Vous pouvez personnaliser l'apparence des fenêtres de clavardage avec un CSS personnalisé à l'aide de sélecteurs de données dans vos appels d'API. Les sélecteurs de données vous permettent de spécifier la partie de la fenêtre de clavardage à laquelle vous souhaitez appliquer le CSS personnalisé. Définissez le sélecteur de données à l'aide de l'attribut sélecteur de données (data-selector). Définissez-le égal au nom du composant de la fenêtre de clavardage que vous souhaitez modifier.

Pour ajouter du CSS personnalisé avec des sélecteurs de données, utilisez cet appel d'API comme référence :

cxone('chat','setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');

Intégration avec des Applications tierces

Les appels de cette section vous permettent de recevoir des notifications push lorsque certains événements de chat se produisent.

Reconnaître les discussions actives dans la fenêtre de discussion

cxone('chat','getOngoingThreads');

Reconnaître le contact en cours dans la fenêtre de chat

cxone('chat','getOngoingContact');

Recevoir une notification push pour des Événements de chat spécifiques

Pour recevoir une notification pour un événement de chat :

cxone('chat','onPushUpdate', 'event', callback);

Pour recevoir une notification pour plusieurs événements de chat :

cxone('chat','onPushUpdate', ['event', 'event', 'event'], callback);

Pour recevoir une notification pour tous les événements de chat :

cxone('chat','onAnyPushUpdate', callback);