https://d226lax1qjow5r.cloudfront.net/blog/blogposts/send-and-request-data-with-webhooks-with-ai-studio/send-request-data_webhooks_ai-studio.png

Envoyer et demander des données à l'aide de Webhooks avec AI Studio

Publié le November 29, 2022

Temps de lecture : 6 minutes

Introduction

Vonage AI Studio est une plateforme d'IA conversationnelle Low-Code / No-Code qui aide les entreprises à gérer les interactions complexes avec les clients par le biais de la voix et du texte. Lorsque vous créerez des agents virtuels avec AI Studio, vous ne tarderez pas à avoir besoin de récupérer des données à partir d'une source tierce, telle qu'un Webhook. Dans cet article de blog, vous apprendrez :

  • Comment récupérer les données d'un Webhook dans AI Studio à partir d'un point de terminaison REST ?

  • Comment stocker les données en tant que paramètre (pour une utilisation ultérieure) ?

  • Exemples d'instructions conditionnelles permettant d'effectuer des opérations sur les données

Pour comprendre comment interagir avec un Webhook dans AI Studio, nous allons utiliser un scénario dans lequel une banque souhaite valider l'identité d'un client en faisant correspondre un numéro de pin avec le numéro récupéré à partir d'un Webhook.

Comprendre les données de la charge utile

Vous trouverez ci-dessous un extrait des données renvoyées dans notre exemple de charge utile :

[
  ...
  {
    "id": 4,
    "email": "michael.crump@vonage.com",
    "phone": "14259999999",
    "name": "Michael Crump",
    "cc_balance": "76.31",
    "pin": "1234"
  }
]

Une fois que le client a composé le numéro de téléphone de la banque, nous utiliserons la fonction téléphone pour trouver la valeur correcte du numéro de pin via ce Webhook.

Intégrer lesCrochet Web

À ce stade, vous avez déjà créé un projet AI Studio qui utilise un fichier appel . Si vous avez encore besoin de le faire, veuillez suivre ce guide. Faites défiler vers le bas à partir de la page Nœuds jusqu'à ce que vous arriviez à Intégrationssélectionnez Crochet Webet faites-le glisser sur votre canevas.

Integrations Dialogintegrations.png

Cliquez sur l'événement Webhook nouvellement créé, car vous devrez fournir l'URL de votre point de terminaison.

Puisque notre requête sera basée sur le numéro de téléphone, nous utiliserons l'URL codée en dur suivante (qui pointe vers un numéro de téléphone spécifique) : https://my-json-server.typicode.com/mbcrump/ai-studio-api/customers?phone=14259999999. Une fois que vous l'avez ajoutée, appuyez sur Tester la requête comme indiqué ci-dessous.

Si vous souhaitez en savoir plus sur le Chatbot Tester, cliquez sur le lien suivant ici.

Testing our Webhook calltest-webhook-1.png

Si vous voyez un statut de 200, cela signifie que la demande a été renvoyée avec succès (vous pouvez voir dans le fichier Réponse les informations que nous avons obtenues en nous basant sur le numéro de téléphone de cet utilisateur (qui a été codé en dur).

Bien que ces données aient été codées en dur dans l'URL de la requête, comment AI Studio transmet-il ces informations en fonction du numéro appelé ? C'est ici que nous utiliserons l'un des paramètres système appelé NUMÉRO_DE_TÉLÉPHONE_DE_L'APPELANT, comme indiqué ci-dessous.

Testing our Webhook callsystem_parameters.png

Vous pouvez déclencher ce dialogue en appuyant sur la touche $ et en sélectionnant le paramètre système que vous souhaitez utiliser. Notre URL est maintenant https://my-json-server.typicode.com/mbcrump/ai-studio-api/customers?phone=$CALLER_PHONE_NUMBER.

Une fois l'opération terminée, n'oubliez pas d'appuyer sur Sauvegarder et quitter.

Testing our Webhook callwebhook-with-phone-number.png

Si nous essayons de tester le WebHook maintenant, vous obtiendrez un code d'état 200, mais il n'y aura pas de données dans la réponse.

No Data Returnedno-data-returned.png

Nous pouvons y remédier en cliquant sur le bouton Paramètres et en spécifiant un NUMÉRO DE TÉLÉPHONE DE L'APPELANT, comme indiqué ci-dessous.

Specifying a Phone Numbersetting-system-parameters.png

Maintenant, si vous appuyez sur Renvoyer la demandevous obtiendrez une réponse correcte, comme indiqué ci-dessous.

Resent Webhook Requestsuccessful-response.png

Mise en place de paramètres pour faire quelque chose avec les données renvoyées

Maintenant que nous pouvons appeler un WebHook à partir d'AI Studio et renvoyer des données, nous allons utiliser les paramètres suivants paramètres pour extraire et utiliser des informations spécifiques à partir des données fournies par l'utilisateur. Par exemple, pour collecter les informations d'un utilisateur (c'est-à-dire son code PIN ou le solde de son Account), vous devez définir un paramètre qui stockera les informations afin de pouvoir y accéder ultérieurement.

Pour créer un paramètre, dans la navigation de gauche, cliquez sur Propriétés puis sur Paramètres.

Parameters Selectionparameters-selection.png

Ajoutez un paramètre en cliquant sur la première ligne de la section Paramètres personnalisés paramètres personnalisés.

Nous devons ajouter quatre paramètres ici pour stocker le code PIN qui appartient au client, le code PIN que le client a saisi, le nom du client et le solde du compte au cas où il aurait réussi à saisir un code PIN.

Name Entity Type
pin_number @ sys.number
input_number @ sys.number
name @ sys.any
balance @ sys.number

Une fois l'opération terminée, votre écran devrait ressembler à ce qui suit :

Custom Parametersparameters.png

Presse Fermer une fois que toutes les informations ont été saisies.

Cliquez sur Webhook 1 et regardez sous Cartographie des réponses. Ici, nous allons entrer le premier chemin d'accès à l'objet sous la forme [0][name] et lui donner le paramètre que nous avons créé et qui s'appelle nom.

Response Mappingresponse-mapping.png

Nous percevrons le solde et le NIP pendant que nous sommes ici.

Après les avoir ajoutés, votre écran devrait ressembler à ce qui suit :

Response Mappingresponse-mapping-1.png

Une fois l'opération terminée, n'oubliez pas d'appuyer sur Enregistrer et quitter.

Nous utiliserons un Collecter l'entrée pour demander à l'utilisateur son code PIN. Allez-y et glissez-déposez le nœud de la section Conversation du menu Conversation.

Collect Input Nodecollect-input.png

Pour le Paramètreutiliser le paramètre numéro_d'entrée que nous avons défini précédemment. Pour les Invitesentrez "Saisissez votre code PIN à quatre chiffres pour accéder à votre Account" ou quelque chose de similaire, comme illustré ci-dessous.

Collect Input Nodeparameter-input-number.png

Nous allons maintenant connecter le Webhook 1 à la fonction Collecter l'entrée 1 comme indiqué ci-dessous.

Connect Webhook Collect Inputconnect-webhook-collect-input.png

Glisser-déposer un Condition à partir du nœud Conversation dans le menu Conversation. Cliquez sur "Défaut" à l'intérieur de la note et appuyez sur Créer une condition.

Comme indiqué ci-dessous, nous allons créer une condition qui vérifie si le Numbers d'entrée qu'ils ont saisi correspond au PIN de notre Webhook.

Condition Requirementscondition-req.png

Une fois l'opération terminée, n'oubliez pas d'appuyer sur Enregistrer et quitter.

Glisser-déposer deux autres Parler sur le canevas. Pour le nœud Parler 2 entrez le message, Verification Successful Welcome $name. Your balance is $balance.$name est le paramètre que nous avons défini précédemment.

Speak 2 Nodespeak-2-node.png

Pour les Parler 3 entrez le message " Je suis désolé, ce n'était pas correct ", où $name est le paramètre que nous avons défini plus tôt. Une fois que vous avez terminé, appuyez sur Entrée et n'oubliez pas d'appuyer sur Sauvegarder et quitter.

Enfin, ajoutez un appel Appel de fin dans le canevas.

Vous devez maintenant connecter le Condition 1 (nouvelle condition) à parole 2 et Condition 1 (par défaut) à Parler 3. Ensuite, connectez Speak 2 et Speak 3 au Fin de l'appel 1 comme indiqué ci-dessous.

Final Resultfinal-result.png

Appuyez sur le bouton Testeur en haut à droite de l'écran, puis sélectionnez Appel entrant comme événement, puis Démarrer le chat. Vous devrez définir les paramètres initiaux comme nous l'avons fait précédemment pour le NUMÉRO DE TÉLÉPHONE DE L'APPELANT et lui donner la valeur 14259999999.

Set Inital Parametersset-initial-parameters.png

Maintenant, si vous exécutez à nouveau l'outil de test, vous pouvez fournir un numéro à quatre chiffres (par exemple 1234), et l'agent virtuel vous renverra votre Nomet le solde du compte trouvés dans le fichier db.json comme indiqué ci-dessous.

Tester Chat Completedtester-chat-completed.png

Génial ! Nous avons réussi à mettre en œuvre un Webhook et à créer une logique avec les données renvoyées.

Synthèse

C'est maintenant à vous de jouer. Il y a plusieurs façons d'étendre l'application, par exemple :

  • La logique d'une instance lorsqu'aucun code PIN n'est trouvé

  • Authentification du webhook à des fins de sécurité (jetons d'authentification, etc.).

  • Nombre maximum de tentatives en cas d'échec d'une tentative

Qu'attendez-vous ? Rendez-vous sur le site de AI Studio pour commencer votre voyage.

Si vous avez des questions ou des commentaires, rejoignez-nous sur le Slack des développeurs de Vonage ou envoyez-moi un Tweet sur Twitteret je vous répondrai. Merci encore d'avoir lu, et je vous donne rendez-vous au prochain numéro !

Partager:

https://a.storyblok.com/f/270183/400x400/7cdff37c0e/michael-crump.png
Michael CrumpGestionnaire, expériences des développeurs

Michael Crump travaille chez Vonage au sein de l'équipe Developer Experiences. C'est un codeur, un YouTuber et un conférencier qui aborde fréquemment divers sujets liés à .NET et au développement des communications et de l'informatique en nuage. Il se passionne pour aider les développeurs à comprendre les avantages de chacun d'entre eux de manière simple.