Envía mensajes de WhatsApp desde Google Sheets con AI Studio

Se trata de un concepto sencillo pero potente: recuperar datos de tu Google Sheet y enviarlos por WhatsApp. Y, a continuación, obtener datos de una conversación de WhatsApp e introducirlos automáticamente en una hoja de Google. ¿Está tu empresa buscando una integración rápida y sencilla entre WhatsApp y Google Sheets para mejorar la experiencia del cliente? No busques más, este tutorial te mostrará cómo hacerlo.

En este tutorial, aprenderás a utilizar la plataforma sin código/de bajo código de Vonage, AI Studio, para crear un chatbot de WhatsApp que gestione los comentarios de los usuarios sobre los productos.

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.

Requisitos previos

• Cuenta de desarrollador de Vonage

• Número virtual de Vonage - Alquile un número para tu agente virtual

• Cuenta de Google Sheets - Registrarse en Google

Cómo crear una base de datos de Google Sheets

Abrir Hojas de cálculo de Google y haz clic en Hoja de cálculo en blanco. Dale a tu hoja de cálculo un título bonito como WhatsApp Product Feedback. A continuación, asigna a tu primera hoja el nombre users.

La hoja users hoja tendrá 3 cabeceras de columna:

1. phone_number

2. first_name

3. last_name

Añada un usuario de prueba con los tres campos de datos completos.

• Para phone_number, añada su propio número de WhatsApp u otro número de teléfono al que pueda acceder para recibir WhatsApp para realizar pruebas. Numbers deben estar en formato internacional sin + o 00. Por ejemplo, un número de EE.UU. sería 15552345678.

Ahora añade una segunda hoja llamada responses. La hoja responses tendrá 4 encabezados de columna:

1. phone_number

2. type

3. feature

4. feedback

Cómo utilizar Google Sheets como API REST

Ahora convertirás tu hoja de cálculo de Google en una API REST. Abre la pestaña Extensiones y selecciona Apps Scripts. Apps Scripts te permite escribir código sobre aplicaciones de Google Workspace como Google Sheets o Google Docs para automatizar y ampliar su funcionalidad.

Primero, dale a tu nuevo proyecto un título bonito como WhatsApp Product Feedbacky borra el código en la pestaña code.gs.

Cómo crear un punto final de solicitud GET para Google Sheets

Puede añadir el siguiente código en 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);
}

¿Pero qué hace este código? La primera función crea nuestra lógica que manejará un nombre de hoja, como usersy un phone_numbercomo tu número de WhatsApp. Luego buscará en la hoja de cálculo activa para encontrar esta hoja en particular. Dentro de esa hoja, encuentra la columna llamada phone_number y luego busca cada fila en la columna phone_number que se proporciona. Si encuentra una coincidencia, toma los datos de esa fila y los convierte en JSON.

La segunda función crea un endpoint GET y extrae los valores de los parámetros de consulta de path y phone_number. Luego envía esos valores de vuelta a la primera función y devuelve el JSON que recibe.

Cómo crear un punto final de solicitud POST para Google Sheets

Debajo de su lógica de solicitud GET, ahora puede añadir lo siguiente:

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.");
}

Esto crea un punto final POST, que de nuevo extrae la información enviada en la solicitud. Sin embargo, aquí los datos se envían en el cuerpo, por lo que e.postData.contents se encarga de ello. Una vez que se han extraído todos los datos y se ha cargado la hoja responses se crea una nueva fila en el array newRow. Luego se añade con el método appendRow . Por último, se envía un bonito mensaje de respuesta para que sepamos en AI Studio que nuestra operación ha tenido éxito.

Ahora puedes desplegar tu aplicación web y hacerla pública. Haga clic en Desplegar.

Se abrirá un panel que le pedirá que seleccione un tipo de despliegue. Haz clic en el icono de configuración y selecciona Aplicación web. En "Ejecutar como", selecciona tú mismo. Y para "Quién tiene acceso", selecciona cualquiera. Continúa y haz clic en Autorizar acceso, y sigue para permitir que Google autorice el acceso al proyecto.

Por último, verá un panel Nuevo despliegue que incluye una URL de Web App. Guarde esta URL para más tarde. Por último, haga clic en Listo.

Cómo crear un chatbot de WhatsApp entrante

Para crear su agente sin código/de código bajo, siga las instrucciones que se encuentran en la documentación de AI Studio. Hay tres opciones importantes para nuestro agente, a seleccionar:

• Tipo: WhatsApp

• Plantilla: Empezar de cero

• Evento: Entrada

Nuestro agente será bastante simple, utilizando sólo 4 tipos de nodos diferentes:

1. Nodo Enviar Mensaje: un único mensaje de texto enviado desde el agente virtual al usuario.

2. Nodo de entrada de recogidael agente virtual hará una pregunta al usuario. La entrada del usuario será capturada y almacenada en un valor de parámetro.

3. Nodo condicionalun operador lógico que permite a su flujo diferenciar entre diferentes valores para un parámetro. Por ejemplo, if/else.

4. Nodo Webhook: Este nodo te permite enviar y solicitar datos a y desde servicios de terceros, ¡como tu API de Google Sheets!

Cómo crear parámetros personalizados en AI Studio

Nuestro agente low-code utilizará 5 parámetros personalizados. Cree los parámetros: feature, feedback, feedback_type, first_namey last_name. Los 5 deben ser de la @sys.any entidad.

Custom Parameters in AI Studio

Cómo crear un flujo de comentarios de usuarios de WhatsApp en AI Studio

El flujo de nuestro agente virtual consistirá en saludar a nuestro usuario por su nombre y, a continuación, recoger la opinión sobre el producto de nuestro usuario antes de enviar los datos a nuestra hoja de cálculo de Google. Puedes añadir los siguientes nodos, empezando por el nodo Nodo Inicio.

1. Recuperar Nombre de Usuario a. Tipo de Nodo: Nodo Webhook b. Método: GET c. URL: La URL de tu Web App de la sección anterior d. Body: selecciona el tipo de cuerpo que será Text e. Parámetros de consulta:

   • Parámetro de consulta: path

   • Valor: users

   f. Mapeo de respuestas

   • Ruta del objeto: [0][“first_name”]Parámetro: $first_name

   • Ruta del objeto: [0][“last_name”Parámetro: $last_name

GET Request with Response Mapping2. Mensaje de bienvenida

1. Tipo de nodo: Nodo de envío de mensajes

2. Tipo de salida: Texto

3. El agente dice: "Hey$first_name$last_name¡bienvenido de nuevo! Gracias por darnos tu opinión 🥰"

3. Recoger el tipo de respuesta

1. Tipo de nodo: Nodo de Entrada de Recogida

2. Parámetro: feedback_type

3. Mensaje Botones de respuesta

4. Cuerpo: "Por favor, seleccione el tipo de comentario"

Botones:

1. Título del botón: "🐛 Informar de un error", Valor del botón: bug

2. Título del botón: "🙋 Petición de funciones", Valor del botón: request

3. Título del botón: "⚡️ Otros", Valor del botón: other

4. Recopilación

1. Tipo de nodo: Nodo de Entrada de Recogida

2. Parámetro: feature

3. Mensaje Botones de respuesta

4. Cuerpo: "¿A qué característica se refiere?"

5. Botones:

6. Título del botón: "1⃣ Característica uno", Valor del botón: one

   • Título del botón: "2⃣ Característica Dos", Valor del Botón: two

   • Título del botón: "3⃣ Característica Tres", Valor del Botón: three

5. Si feedback = bug

1. Tipo de nodo: Condición

2. Condición: si tipo = bug

3. Parámetro: feedback_type

   • Operación: es igual a

   • Valor: bug

Aquí, su flujo divergirá en un solo paso. Esto se debe a que queremos permitir a los usuarios que nos envíen fotos de sus errores, pero para el resto de comentarios, esperamos que escriban sus descripciones. Así que desde el if type = bug punto de salida en el nodo anterior, conéctelo al Nodo de Recopilación de Informes de Fallos. Para el punto de salida por defecto en el nodo anterior, conéctelo al Nodo Recopilar Comentarios. Los dos nodos son los siguientes:

6. Recopilación de informes de errores

1. Tipo de nodo: Nodo de Entrada de Recogida

2. Parámetro: feedback

3. Mensaje: Texto

4. Cuerpo: "🐛 Por favor, describe el fallo. 📸 También puedes enviar una foto del fallo".

Entrada esperada: Texto e imagen

7. Recoger opiniones

1. Tipo de nodo: Nodo de Entrada de Recogida

2. Parámetro: feedback

3. Mensaje: Texto

4. Cuerpo: "🙌 Por favor, describa sus comentarios"

5. Entrada esperada: Sólo texto

8. Enviar a Google Sheets

1. Tipo de nodo: Nodo Webhook

2. Método POST

3. URL: La URL de su aplicación web de la sección anterior

4. Cuerpo: {"phone_number": $SENDER_PHONE_NUMBER, "tipo": "$feedback_type", "característica": "$feature", "feedback": "$feedback"}

POST Request in AI Studio9. Mensaje de agradecimiento

1. Tipo de nodo: Nodo de envío de mensajes

2. Tipo de salida: Texto

3. El agente dice: "Gracias por los valiosos comentarios 🙏 Que tenga un buen día!"

10 Nodo de fin de conversación

Ahora, tu agente está listo para enviar mensajes de WhatsApp desde Google automáticamente.

Cómo probar tu chatbot de WhatsApp

Ahora que su agente virtual está conectado, puede abrir la ventana Comprobador. Asegúrese de añadir primero un valor de prueba phone_number haciendo clic en el icono de configuración de la esquina superior derecha. Busque el parámetro SENDER_PHONE_NUMBER parámetro del sistema y añada el valor de su users hoja de Google. Para cerrar el panel de Parámetros Iniciales, haga clic de nuevo en el icono de ajustes en el Probador. Ahora puedes hacer clic en el icono de actualización e iniciar tu conversación de prueba.

Qué chulo es tu nuevo agente de comentarios sobre productos. ¿Has probado a añadir fotos a los informes de errores? Echa un vistazo a la hoja de Google y mira cómo añade una URL. Cuando intentes abrir la URL, deberías descargar automáticamente la imagen que se envió a tu agente virtual, ¡impresionante!

Conclusión

En este tutorial, creaste una integración bidireccional entre WhatsApp y Google Sheets, enviando mensajes desde una hoja de cálculo y capturando los comentarios de los usuarios directamente en una. Y lo hiciste todo usando herramientas sin código y de bajo código con Vonage AI Studio.

El siguiente paso que dé a su agente depende de usted. Puede añadir autenticación a su API de Google Sheets para proteger datos confidenciales, o mejorar la precisión de su chatbot evitando las alucinaciones con Knowledge AI.

Buscas otras formas de ofrecer experiencias de mensajería ricas e interactivas? RCS es una potente alternativa a WhatsAppque ofrece funciones como respuestas sugeridas, carruseles y flujos similares a los de las aplicaciones dentro de las aplicaciones de mensajería nativas.

Decidas lo que decidas, ¡queremos saberlo!