Personnaliser Guide Chat avec les API

Vous pouvez personnaliser l'apparence et le comportement du chat implémenté avec Guide en utilisant ces API liées au chat.

Appels d'API de Comportement de conversation

Les appels de cette section vous permettent de contrôler le comportement des fenêtres de chat Guide.

Définir le code d'autorisation

Définit un code d'autorisation pour le flux OAuth. OAuth est un protocole d'authentification. Il permet de laisser une application interagir avec une autre à votre place, sans révéler vos mots DE passe. Doit être appelé avant l'initialisation du chat.

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

Personnaliser le message de contact automatisé initial

Lorsqu’un chat 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 masqué et automatisé est envoyé au nom du visiteur lorsque la session de chat démarre. Cela réduit 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 de 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);

Délai de 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 chat est envoyé. Un message masqué et automatisé est envoyé au nom du visiteur lorsque la session de chat démarre. Cela réduit le temps d'attente des visiteurs pour un agent. Les sessions de chat démarrent lorsqu'un visiteur clique sur l'icône de chat pour commencer une conversation. Bien que le message initial soit caché au visiteur, l'agent peut le voir.

Vous pouvez configurer Guide pour attendre le premier message réel du visiteur avant de créer une requête à 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é

Une enquête de satisfaction peut être automatiquement détectée et affichée dans une fenêtre contextuelle. Cela permet de contrôler l'automatisation des enquêtes de satisfaction.

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

Appels d'API d'Informations sur le chat

Ces appels vous permettent de personnaliser les informations disponibles pour les visiteurs lors d'une session de chat.

Obtenir l'ID d'identité du Client

Renvoie l'identificateur unique du visiteur dans le chat.

cxone('chat','getCustomerIdentityId');

Définir l'Id client

Définit un identificateur unique pour le visiteur participant au chat.

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

Masquer Nombre de contacts en attente

Le nombre de contacts en attente permet à un visiteur de savoir dans combien de temps un agent pourra l'aider, en fonction de sa position dans la file d'attente de l'agent. Vous pouvez masquer le compteur de file d'attente dès que le visiteur a été transféré à un agent. Cela permet aux agents de supprimer des cartes clients de leur boîte de réception sans que les visiteurs 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 pouvez l'utiliser pour communiquer votre temps de réponse pour une session de chat messaging Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Cela peut être utile car la messagerie instantanée est une forme de discussion 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 discussion. 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. Remplacez l'exemple d'URL par l'URL de l'image que vous souhaitez que le chat utilise.

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

Définir le Nom du client

Nom du client est un champ du formulaire de sondage préalable au contact, que les visiteurs sont tenus de remplir avant de dialoguer avec un agent sur un canal de messagerie de chat 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 date

Définit le format de date sur absolu (01/01/2022) ou relatif (aujourd'hui, Lundi).

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

Définir les paramètres régionaux

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

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

Afficher les Informations sur le cas

Uniquement pour les canaux de messagerie chat Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Affiche les informations sur le cas au contact.

cxone('chat','showCaseInfo');

Afficher/Masquer le bouton Envoyer la transcription

Si vous rendez le bouton Envoyer transcription visible, vous devez configurer le canal de chat pour permettre aux visiteurs de s'envoyer la transcription du chat à eux-mêmes. Configurez cette option pour messagerie de chat ou chat en direct.

cxone('chat','showSendTranscript');

cxone('chat','hideSendTranscript');

Afficher/Masquer les messages Système

Affiche ou masque les messages système, tels que l'historique d'affectation d'un agent.

cxone('chat','showSystemMessages');

cxone('chat','hideSystemMessages');

Conditions d'utilisation

Vous pouvez mettre un document de conditions générales à la disposition des visiteurs depuis la fenêtre de discussion. 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 d'API de champ personnalisé ci-dessous, vous devez d'abord créer le champ personnalisé dans NiCE CXone. Créez le champ personnalisé pour un(e) 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 référencerez 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 Chat CXone Digital pour capturer des données de votre page web et les enregistrer 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 chat débute.

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

• setContactCustomField — Stocke la valeur du champ personnalisé sur le Contact, qui représente une interaction ou une conversation unique. Utilisez cette option lorsque les données sont spécifiques à 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, vous pouvez voir apparaître 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 Customer Card, qui représente le profil du contact dans toutes les interactions. Utilisez cette option 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écapitule les méthodes API disponibles pour définir les valeurs des champs personnalisés. Reportez-vous aux exemples de code détaillés sous le tableau pour obtenir des conseils relatifs à l'implémentation.

example	Méthode API	description
Définir un champ personnalisé contact unique	setContactCustomField	Pour renseigner un champ Cas à la fois.
Définir plusieurs champs personnalisés de contact à la fois	``` setContactCustomFields ```	Mise à jour groupée efficace de plusieurs champs de cas.
Définir un seul champ personnalisé Customer Card	setCustomerCustomField	Pour les champs de profil Customer Card.
Définir Multiple champs personnalisés Customer Card à la fois	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 des champs personnalisés peuvent être définies de deux façons :

Statistique — La valeur est codée en dur directement dans l'Appel API. Cela 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 chat.

• Pour définir la valeur du champ personnalisé contact unique

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

• To définir la valeur de plusieurs champs personnalisés de contact

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

• Pour définir la valeur du champ unique Customer Card

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

• Pour définir la valeur de plus que 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);

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

Add the custom field API calls to the same script block where the Guide widget is embedded on your webpage. Place the API calls just above the closing </script> tag, after the widget initialization code. For example:

<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 sur l'emplacement des appels de personnalisation, consultez Personnaliser Guide à l'aide de JavaScript.

Personnaliser les Étiquettes et les Phrases

Vous pouvez personnaliser de nombreuses étiquettes et phrases que le chat Guide utilise, ainsi que définir les personnalisations à appliquer. Si vous devez modifier dynamiquement les phrases ou les libellés d'écran, utilisez ces appels d'API.

Pour modifier un seul message ou libellé :

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

Pour modifier plusieurs messages ou libellés :

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

Appels API relatifs à l'apparence de la fenêtre de Conversation

Vous pouvez modifier l'apparence de la fenêtre de discussion 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 discussion 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 discussion à laquelle vous souhaitez appliquer le CSS personnalisé. Définissez le sélecteur de données à l'aide de l'attribut data-selector. Définissez-le avec le nom du composant de fenêtre de chat que vous souhaitez modifier.

Pour ajouter du CSS personnalisé avec des sélecteurs de données, utilisez cet Appel 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 plus qu'un événement de chat :

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

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

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