Envoyer des messages WhatsApp depuis Google Sheets avec AI Studio

C'est un concept simple mais puissant : récupérer des données dans votre Google Sheet et les envoyer via WhatsApp. Puis récupérer des données d'une conversation WhatsApp et les saisir automatiquement dans une feuille Google. Votre entreprise cherche-t-elle une intégration rapide et facile entre WhatsApp et Google Sheets pour améliorer l'expérience de ses clients ? Ne cherchez pas plus loin, ce tutoriel vous montrera comment faire.

Dans ce tutoriel, vous apprendrez à utiliser la plateforme no-code/low-code de Vonage, AI Studio, pour construire un chatbot WhatsApp qui gère les commentaires des utilisateurs sur les produits.

Preview of WhatsApp Feedback Flow

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Conditions préalables

• Compte de développeur Vonage

• Numéro virtuel de Vonage - Louez un numéro pour votre agent virtuel

• Compte Google Sheets - S'inscrire à Google

Comment créer une base de données Google Sheets

Ouvrir Google Sheets et cliquez sur Feuille de calcul vierge. Donnez à votre feuille de calcul un titre attrayant tel que WhatsApp Product Feedback. Ensuite, nommez votre première feuille users.

La feuille users aura 3 colonnes d'en-têtes :

1. phone_number

2. first_name

3. last_name

Ajoutez un utilisateur pour le test avec les trois champs de données remplis.

• Pour phone_numberajoutez votre propre numéro WhatsApp ou un autre numéro de téléphone auquel vous pouvez accéder pour recevoir WhatsApp à des fins de test. Les numéros de téléphone doivent être au format international, sans + ni 00. Par exemple, un numéro américain serait 15552345678.

Ajoutez maintenant une deuxième feuille appelée responses. La feuille responses aura 4 colonnes d'en-têtes :

1. phone_number

2. type

3. feature

4. feedback

Comment utiliser Google Sheets en tant qu'API REST

Vous allez maintenant transformer votre feuille de calcul Google en une API REST. Ouvrez l'onglet Extensions et sélectionnez Apps Scripts. Apps Scripts vous permet d'écrire du code au-dessus des applications de l'espace de travail Google, telles que Google Sheets ou Google Docs, afin d'automatiser et d'étendre leurs fonctionnalités.

Tout d'abord, donnez à votre nouveau projet un titre agréable comme WhatsApp Product Feedbacket effacez le code dans l'onglet sous code.gs.

Comment créer un point de terminaison de requête GET pour Google Sheets ?

Vous pouvez ajouter le code suivant dans code.gs :

function json(sheetName, phoneNumber) {
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet = spreadsheet.getSheetByName(sheetName);
 const data = sheet.getDataRange().getValues();
  // Find the row corresponding to the given phone number
 const headers = data[0];
 const rowIndex = data.findIndex(row => row[headers.indexOf('phone_number')] === phoneNumber);
  // If the phone number is found, return the corresponding entry, otherwise return null
 if (rowIndex !== -1) {
   const rowData = data[rowIndex];
   const jsonData = convertToJson([headers, rowData]);
   return ContentService
          .createTextOutput(JSON.stringify(jsonData))
          .setMimeType(ContentService.MimeType.JSON);
 } else {
   return ContentService
          .createTextOutput(JSON.stringify({error: "Phone number not found."}))
          .setMimeType(ContentService.MimeType.JSON);
 }
}


function doGet(e) {
 const path = e.parameter.path;
 const phoneNumber = e.parameter.phone_number; // Extract phone number from URL parameter
 return json(path, phoneNumber);
}

Mais que fait ce code ? La première fonction crée notre logique qui traitera un nom de feuille, comme userset un phone_numbercomme votre numéro WhatsApp. Elle effectue ensuite une recherche dans la feuille de calcul active pour trouver cette feuille en particulier. À l'intérieur de cette feuille, elle trouve la colonne appelée phone_number et recherche ensuite chaque ligne à l'aide de la fonction phone_number qui lui a été fournie. S'il trouve une correspondance, il prend les données de cette ligne et les convertit en JSON.

La deuxième fonction crée un point d'accès GET et extrait les valeurs des paramètres de requête de path et phone_number. Elle renvoie ensuite ces valeurs à la première fonction et renvoie le JSON qu'elle a reçu.

Comment créer un point de terminaison de requête POST pour Google Sheets ?

Sous la logique de votre requête GET, vous pouvez maintenant ajouter ce qui suit :

function doPost(e) {
 // Parse incoming POST data
 const postData = JSON.parse(e.postData.contents);

 // Extract data from the POST request
 const phoneNumber = postData.phone_number;
 const type = postData.type;
 const feature = postData.feature;
 const feedback = postData.feedback;

 // Get the "responses" sheet
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet = spreadsheet.getSheetByName("responses");

 // Append a new row with the data
 const newRow = [phoneNumber, type, feature, feedback];
 sheet.appendRow(newRow);

 // Return success response
 return ContentService.createTextOutput("Row added successfully.");
}

Cela crée un point de terminaison POST, qui extrait à nouveau les informations envoyées dans la requête. Cependant, ici les données sont envoyées dans le corps de la requête, donc e.postData.contents s'en occupe donc très bien. Une fois que toutes les données ont été extraites et que la feuille responses chargée, une nouvelle ligne est créée dans le tableau newRow. Elle est ensuite ajoutée à l'aide de la méthode appendRow . Elle est ensuite ajoutée à l'aide de la méthode Enfin, un joli message de réponse est envoyé pour que nous sachions dans AI Studio que notre opération a réussi.

Vous pouvez maintenant déployer votre application web et la rendre publique. Cliquez sur Déployer.

Cela ouvrira un panneau qui vous demandera de "Sélectionner un type de déploiement". Cliquez sur l'icône des paramètres et sélectionnez Web app. Pour "Exécuter en tant que", sélectionnez vous-même. Et pour "Qui a accès", sélectionnez n'importe qui. Continuez et cliquez sur Autoriser l'accès, et continuez à permettre à Google d'autoriser l'accès au projet.

Enfin, vous verrez un panneau Nouveau déploiement qui comprend une URL d'application Web. Enregistrez cette URL pour plus tard. Enfin, cliquez sur Terminé.

Comment créer un chatbot WhatsApp entrant

Pour créer votre agent no-code/low-code, suivez les instructions figurant dans la documentation de documentation d'AI Studio. Notre agent doit sélectionner trois options importantes :

• Type : WhatsApp

• Modèle : Partir de zéro

• Événement : Inbound

Notre agent sera relativement simple, puisqu'il n'utilisera que 4 types de nœuds différents :

1. Nœud d'envoi de message: message textuel unique envoyé par l'agent virtuel à l'utilisateur.

2. Collecter le nœud d'entréeNœud de collecte des données : l'agent virtuel pose une question à l'utilisateur. L'entrée de l'utilisateur sera capturée et stockée dans une valeur de paramètre.

3. Nœud conditionnelNœud conditionnel : un opérateur logique qui permet à votre flux de différencier les différentes valeurs d'un paramètre. Par exemple, if/else.

4. Nœud Webhook: Ce nœud vous permet d'envoyer et de demander des données à des services tiers, comme votre API Google Sheets !

Comment créer des paramètres personnalisés dans AI Studio ?

Notre agent "low-code" utilisera 5 paramètres personnalisés. Créez les paramètres: feature, feedback, feedback_type, first_nameet last_name. Les 5 doivent être de l'entité @sys.any entité.

Custom Parameters in AI Studio

Comment créer un flux de rétroaction des utilisateurs de WhatsApp dans AI Studio

Le flux de notre agent virtuel consistera à accueillir l'utilisateur par son nom, puis à recueillir ses commentaires sur le produit avant d'envoyer les données à notre feuille de calcul Google. Vous pouvez ajouter les nœuds suivants, en commençant par le nœud Nœud de départ.

1. Récupérer le nom d'utilisateur a. Type de nœud : Webhook Node b. Method : GET c. URL : L'URL de votre application Web de la section précédente. d. Body : sélectionnez le type de corps à utiliser. Text e. Paramètres de requête :

   • Paramètre d'interrogation : path

   • Valeur : users

   f. Cartographie des réponses

   • Chemin d'accès à l'objet : [0][“first_name”]Paramètre : $first_name

   • Chemin d'accès à l'objet : [0][“last_name”], Parameter : $last_name

GET Request with Response Mapping2. Message de bienvenue

1. Type de nœud : Nœud d'envoi de message

2. Type de sortie : Texte

3. L'agent dit : "Hé$first_name$last_namebienvenue ! Merci de nous avoir fait part de vos commentaires 🥰"

3. Collecter le type de retour d'information

1. Type de nœud : Nœud d'entrée de collecte

2. Paramètre : feedback_type

3. Message : Boutons de réponse

4. Corps : "Veuillez sélectionner le type de retour d'information"

Boutons :

1. Titre du bouton : "🐛 Report a bug", Button Value : bug

2. Titre du bouton : "🙋 Feature request", Button Value : request

3. Titre du bouton : "⚡️ Other", Button Value : other

4. Collecte des caractéristiques

1. Type de nœud : Nœud d'entrée de collecte

2. Paramètre : feature

3. Message : Boutons de réponse

4. Organe : "Quelle est la caractéristique concernée ?"

5. Boutons :

6. Titre du bouton : "1⃣ Feature One", Button Value : one

   • Titre du bouton : "2⃣ Feature Two", Button Value : two

   • Titre du bouton : "3⃣ Feature Three", Button Value : three

5. Si retour d'information = bogue

1. Type de nœud : Condition

2. Condition : si type = bug

3. Paramètre : feedback_type

   • Opération : est égal à

   • Valeur : bug

Ici, votre flux divergera pour une seule étape. En effet, nous voulons permettre aux utilisateurs de nous envoyer des photos de leurs bogues, mais pour tous les autres commentaires, nous attendons d'eux qu'ils saisissent leurs descriptions. Ainsi, à partir du point de sortie if type = bug du nœud précédent, connectez-le au nœud de collecte des rapports de bogues. Pour le point de sortie par défaut du nœud précédent, connectez-le au nœud de collecte des commentaires. Les deux nœuds sont les suivants :

6. Collecte des rapports de bogues

1. Type de nœud : Nœud d'entrée de collecte

2. Paramètre : feedback

3. Message : Texte

4. Corps : "🐛 Veuillez décrire le bogue. 📸 Vous pouvez également envoyer une photo de l'insecte."

Entrée attendue : Texte et image

7. Recueillir le retour d'information

1. Type de nœud : Nœud d'entrée de collecte

2. Paramètre : feedback

3. Message : Texte

4. Corps : "🙌 Veuillez décrire votre retour d'information"

5. Entrée attendue : Texte uniquement

8. Envoyer vers Google Sheets

1. Type de nœud : Nœud Webhook

2. Méthode : POST

3. URL : L'URL de votre application Web de la section précédente

4. Corps : {"phone_number" : $SENDER_PHONE_NUMBER, "type" : "$feedback_type", "feature" : "$feature", "feedback" : "$feedback"}

POST Request in AI Studio9. Message de remerciement

1. Type de nœud : Nœud d'envoi de message

2. Type de sortie : Texte

3. L'agent dit : "Merci pour ce précieux retour d'information 🙏 Bonne journée !"

10 Noeud de fin de conversation

Votre agent est maintenant prêt à envoyer automatiquement des messages WhatsApp depuis Google !

Comment tester votre chatbot WhatsApp

Maintenant que votre agent virtuel est connecté, vous pouvez ouvrir l'application Testeur. Assurez-vous d'abord d'ajouter une valeur phone_number en cliquant sur l'icône des paramètres dans le coin supérieur droit. Recherchez le SENDER_PHONE_NUMBER paramètre du système et ajoutez la valeur de votre users feuille dans Google. Pour fermer le panneau des paramètres initiaux, cliquez à nouveau sur l'icône des paramètres dans le testeur. Vous pouvez maintenant cliquer sur l'icône d'actualisation et commencer votre conversation de test.

Votre nouvel agent de retour d'information sur les produits est vraiment génial ! Avez-vous testé l'ajout de photos pour les rapports de bogues ? Allez voir la feuille Google et voyez comment elle ajoute une URL. Lorsque vous essayez d'ouvrir l'URL, vous devriez automatiquement télécharger l'image qui a été envoyée à votre agent virtuel.

Conclusion

Dans ce tutoriel, vous avez créé une intégration bidirectionnelle entre WhatsApp et Google Sheets, en envoyant des messages à partir d'une feuille de calcul et en capturant les commentaires des utilisateurs directement dans une feuille de calcul. Et vous avez fait tout cela en utilisant des outils no-code et low-code avec Vonage AI Studio.

C'est à vous de décider de la suite que vous donnerez à votre agent. Vous pourriez ajouter l'authentification à votre API Google Sheets pour protéger les données sensibles, ou améliorer la précision de votre chatbot en en évitant les hallucinations grâce à l'IA de la connaissance.

Vous cherchez d'autres moyens de proposer des expériences de messagerie riches et interactives ? RCS est une alternative puissante à WhatsAppqui offre des fonctionnalités telles que des réponses suggérées, des carrousels et des flux similaires à ceux d'une application, au sein même des applications de messagerie natives.

Quoi que vous décidiez de faire, nous voulons en savoir plus !