Personnalisation du chat Guide avec les API

Vous pouvez personnaliser l’aspect et le comportement du chat qui est implémenté avec Guide en utilisant ces API liées au chat.

Appels d'API de comportement de chat

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 le 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 commence dans Guide, un cas La conversation complète avec un agent via un canal. Par exemple, une interaction peut être un appel vocal, un e-mail, un chat ou une conversation sur les réseaux sociaux. est créé et ajouté à 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. 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 traduction.

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 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');

Enquête de satisfaction automatisée

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 de client

Renvoie l'identificateur unique du visiteur dans le chat.

cxone('chat','getCustomerIdentityId');

Définir l'ID de client

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

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

Masquer le compteur de file d'attente

Le compteur de file d'attente indique au visiteur 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 messagerie instantanée Chat asynchrone dans lequel les contacts envoient un message de chat à 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

Le nom du client est un champ du formulaire d'enquête avant contact, que les visiteurs doivent renseigner avant de discuter avec un agent sur un canal de chat Chat asynchrone dans lequel les contacts envoient un message de chat à tout moment et attendent une réponse. Cet appel d’API remplit le champ de façon dynamique.

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

Seulement pour les canaux messagerie instantanée Chat asynchrone dans lequel les contacts envoient un message de chat à 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 la messagerie instantanée ou le 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 générales

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, étiquettes et expressions personnalisés

Créer et remplir des champs personnalisés

Les champs personnalisés que vous pouvez utiliser avec cet appel sont les mêmes que ceux que vous pouvez utiliser dans Carte client. Si vous utilisez ces appels avant d'ouvrir une fenêtre de chat, les champs du formulaire avant contact reprennent les données que vous aviez incluses dans l'appel d'API.

Pour définir la valeur d'un champ personnalisé cas :

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

Pour définir la valeur d'un champ personnalisé Carte client :

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

Personnalisation des libellés et des expressions

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 d'apparence de la fenêtre de discussion

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

Masquer l'agent assigné

cxone('chat','hideAssignedAgent');

Masquer l'en-tête

cxone('chat','hideHeader');

Afficher l'avatar du client

cxone('chat','showCustomerAvatar');

Affichage du bouton d'envoi

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 sélecteur de données. Définissez-le égal au nom du composant de la fenêtre de chat que vous souhaitez modifier.

Pour ajouter du code 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);