Construire la tour de Babel dans Twilio Flex

La création d’outils logiciels pour les centres de contact qui rendent les tâches complexes sans effort est un objectif important au sein de la BU de développement de produits clients de Perficient. Par exemple, nous aidons les agents et les clients qui parlent différentes langues à communiquer facilement par SMS. Certaines entreprises ont des clients dans le monde entier qui parlent un large éventail de langues alors que leurs agents ne parlent que l’anglais.

Un client nous a demandé d’aider les agents anglophones à discuter en ligne dans d’autres langues en traduisant leurs messages avant qu’ils n’atteignent les clients, et en traduisant à leur tour les messages des clients en anglais. Regardons les étapes qui entrent dans l’accomplissement de ce type de demande.

Amazon Translate et autres services AWS

Notre première étape consiste à créer une API optimisée par Traduction AWS et d’autres services Amazon.

Cela prend trois paramètres :

• un bloc de texte,
• la langue dans laquelle le texte est écrit, et
• la langue dans laquelle nous le traduisons.

Nous pouvons écrire le bloc de code ci-dessous dans une fonction Lambda pour envoyer nos paramètres à Amazon Translate et renvoyer un message traduit.

Nous récupérons notre entrée de l’objet queryStringParameters. Les paramètres de langue prennent la forme d’AWS codes de langue. Nous créons un point de terminaison avec Passerelle API et testez notre API dans le navigateur. Pour traduire « bonjour » en espagnol, nous le connectons à notre paramètre « texte », et nous connectons les codes de langue « en » et « es » à nos paramètres « de » et « à »:

« salut »

Chat Web Twilio Flex

Maintenant que nous avons notre traducteur, nous pouvons l’appeler depuis notre interface. Les clients envoient des messages aux agents depuis le site Web du client en utilisant Chat Web Twilio Flex. Depuis leur environnement Flex, les agents peuvent recevoir des appels téléphoniques, des SMS et des messages de discussion en ligne. Ici, nous ne nous intéressons qu’au webchat.

Nous écrivons un brancher traduire les messages de l’agent avant de les envoyer. Nous devons également traduire les messages du client en anglais avant qu’ils n’atteignent l’agent, nous devrons donc modifier la base de code de la page de notre client séparément. Bien que nous ayons besoin que le client et l’agent voient deux versions différentes du même message, Flex WebChat exploite les sockets Web afin que le corps du message soit le même pour les deux parties.

Dans la première phase, nous remplaçons chaque message par une version contenant à la fois le texte traduit et le texte original. Voici un exemple de code pour le côté agent Flex :

Notre URL est le point de terminaison que nous avons créé avec API Gateway. Nous l’appelons avec « en » (anglais) comme paramètre « from » et le code de langue du client, dérivé des attributs de la tâche, comme paramètre « to ». Remarquez le commutateur booléen « notYetTranslated » lancé sur « true ». Nous le changeons en faux après avoir traduit notre message. Noter: Sans ce commutateur, nous créerions une boucle infinie. L’événement continuerait à s’annuler et le message ne serait jamais envoyé.

Lorsque nous traduisons les messages du client en anglais, cela ressemble presque exactement au code côté agent ci-dessus. La seule différence est que notre paramètre « to » est « en » et notre paramètre « from » est le code de langue du client, au lieu de l’inverse. Nous le faisons parce que nous traduisons à anglais, au lieu de de Anglais.

Remplacement du corps du message

Après avoir écrit notre fonction translateMessage et l’avoir ajoutée à l’écouteur SendMessage à la fois dans le plug-in Flex et dans la page Flex WebChat de notre client, nos messages seront traduits dans les deux sens. Mais nous n’avons pas fini. Les messages parviendront à la fois à l’agent et au client dans un format non convivial : le message traduit suivi de l’analyseur « TRANSLATEDFROM », suivi du message d’origine :

Pour montrer à chaque partie le message dans sa langue et uniquement dans sa langue, nous analysons les corps des messages au niveau de l’interface utilisateur. Comme notre écouteur d’événement dans la dernière étape, c’est quelque chose que nous ferons deux fois : une fois dans notre plug-in Flex pour l’écran de notre agent et une fois sur la page Web de notre client pour l’écran de notre client. Cette fois, le code peut être identique dans les deux environnements.

La commande « supprimer » efface le corps de chaque message. Nous ajoutons notre propre composant personnalisé à nos bulles de message pour remplacer les messages que nous avons effacés. C’est un simple composant React. Les composants personnalisés dans Flex héritent des propriétés de leur composant parent, de sorte que notre message est conservé dans ReplaceMessageBody avec son analyseur TRANSLATEDFROM en place. Nous pouvons diviser la chaîne en un tableau au niveau de l’analyseur et ne montrer à l’utilisateur que la version du message qu’il peut comprendre.

Il s’agit de l’instruction de rendu pour ReplaceMessageBody. Dans notre plugin Flex, la valeur booléenne isFromMe sera vraie pour tous les messages envoyés par l’agent. Si le message a été envoyé par l’agent, nous affichons le deuxième élément (non traduit) du tableau. Si le message a été envoyé par le client, nous affichons le premier élément (traduit) du tableau.

Allumer et éteindre le traducteur

Nous pourrions nous arrêter ici et atteindre à peu près l’apparence et la fonctionnalité du côte à côte au début de cet article, Amazon Translate facture par personnage, nous voulons donc éviter de l’appeler lorsque nous ne traduisons rien.

Nous pouvons limiter le service au niveau du frontal Flex pour n’appeler notre fonction translateMessage que si le code de langue de la tâche n’est pas trouvé dans les compétences de l’agent. Cela empêche notre écouteur d’événement d’appeler inutilement notre Lambda, mais cela limite uniquement la traduction côté agent. Du côté du client, nous ne savons pas si notre message initial devra être traduit jusqu’à ce qu’il parvienne à un agent. Une fois que c’est fait, nous pouvons traduire nos messages suivants si et seulement si le message renvoyé par l’agent inclut l’analyseur TRANSLATEDFROM. Nous ajoutons ensuite une logique pour traduire le message initial du client s’il n’est pas déjà en anglais. Et nous modifions le composant ReplaceMessageBody de l’agent pour afficher le message d’ouverture du client non traduit si l’agent maîtrise cette langue. Cela permet à l’agent de voir le premier message du client traduit uniquement si nécessaire. Et s’il n’est pas nécessaire, les messages ultérieurs du client resteront non traduits.

Conclusion

Il s’agit d’un aperçu de preuve de concept pour un simple traducteur de chat Web réalisé avec Twilio Flex et Amazon Web Services. En plus d’ajouter du style et de la sécurité, il y a beaucoup de choses à considérer avant de l’utiliser dans un cadre commercial – comme supprimer l’analyseur TRANSLATEDFROM lorsque l’une ou l’autre des parties le tape manuellement et ajouter des traductions statiques à l’interface utilisateur WebChat afin que les clients soient complètement immergés dans leur propre langue. Cet exemple suppose que notre webchat n’a que deux participants. Un chat avec trois participants ou plus nécessiterait plus de métadonnées dans les messages non analysés.

Si vous disposez déjà d’un environnement Twilio Flex et d’une instance AWS, vous pouvez dupliquer les trois référentiels suivants pour démarrer vous-même avec la traduction de chat Web :

Si vous êtes intéressé par Amazon Translate ou Twilio Flex et avez besoin de conseils pour maximiser l’efficacité de votre centre de contact, nous pouvons vous aider.

Perficient est fier de notre approche personnelle du parcours client où nous aidons les entreprises clientes à transformer et à moderniser leur expérience de centre de contact avec des plates-formes telles que Twilio Flex, Amazon Connect, ServiceNow, etc.

Pour plus d’informations sur la façon dont Perficient peut vous aider à tirer le meilleur parti de votre centre de contact, veuillezcontactez-nous ici.

A propos de l’auteur

Michael Kunz écrit sur les produits logiciels qu’il développe afin que d’autres puissent les utiliser et les améliorer.

Plus de cet auteur