Personnaliser le clavardage Guide à l’aide d’API

Vous pouvez personnaliser l’apparence et le comportement du clavardage mis en œuvre à l’aide de Guide en utilisant ces API liées au clavardage.

Appels de l’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 commence 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 médias 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 pour 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 nombre de contacts en attente

Le nombre de contacts en 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 nombre de contacts en 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 pouvez l’utiliser pour communiquer votre temps de réponse pour une session de messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message de 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 de 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 messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message de clavardage à tout moment et attendent une réponse. Affiche les informations sur le cas 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, é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. i vous utilisez ces appels avant d’ouvrir une fenêtre de clavardage, les champs du formulaire de pré-contact sont préremplis avec les données que vous incluez dans l’appel 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');

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 avez besoin de 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 affecté

cxone('chat','hideAssignedAgent');

Masquer l’en-tête

cxone('chat','hideHeader');

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 des feuilles de style CSS personnalisées 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 clavardage se produisent.

Reconnaître les fils actifs dans la fenêtre de clavardage

cxone('chat','getOngoingThreads');

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

cxone('chat','getOngoingContact');

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

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

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

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

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

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

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