Configuración inicial

1

Desarrolla tu Chatbot con la API de Whatsapp

2

¿Cómo funciona la API de WhatsApp?

3

¿Cómo crear una cuenta de desarrollador en Meta?

4

¿Cómo configurar una aplicación en Developers Facebook?

5

Creación y configuración de una aplicación en Whatsapp

Integración con la API de WhatsApp

6

¿Cómo configurar la API de WhatsApp para recibir y enviar mensajes?

7

¿Cómo configurar la API de WhatsaApp con Postman?

8

¿Cómo crear un servidor de Express?

Implementación de Servidor Express

9

¿Cómo implementar Webhooks en Express?

10

¿Cómo optimizar la arquitectura de un bot usando servicios y controladores?

Comunicación con la API de WhatsApp

11

¿Cómo enviar un mensaje de bienvenida con la API de WhatsApp?

12

¿Cómo configurar una respuesta personalizada desde la API de WhatsApp?

Flujos de Interacción con la API de WhatsApp

13

¿Cómo desarrollar un flujo inicial para guiar a los usuarios con WhatsApp API?

14

¿Cómo configurar un menú de opciones desde la API de WhatsApp?

Multimedia con WhatsApp API

15

¿Cómo integrar mensajes multimedia en el flujo de tu chatbot?

16

¿Cómo Integrar el Send-Media-Message al flujo de tu Chatbot?

17

¿Cómo crear el flujo para agendar una cita desde la API de WhatsApp?

18

¿Cómo crear una lógica que permita almacenar el flujo de tu Chatbot?

Avances y Personalización

19

¿Cómo conectar tu chatbot con Google Sheets para la gestión de datos?

20

¿Cómo configurar la API de Google Sheets para almacenar la información de tu usuario?

21

¿Cómo conectar la API de WhatsApp con ChatGPT?

22

¿Cómo integrar ChatGPT al flujo de la API de WhatsApp?

23

¿Cómo enviar contactos desde tu chatbot para soporte al usuario?

24

¿Cómo configurar la API de WhatsApp para enviar ubicaciones a tu usuario?

25

¿Cómo crear flujos escalables en la API de WhatsApp usando buenas prácticas de programación?

26

¿Cómo desplegar la API de WhatsApp en un ambiente de producción?

27

¿Cómo publicar tu Chatbot para interacciones reales?

28

Ahora tienes tu Chatbot que potencia las interacciones con tu usuario

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

¿Cómo enviar contactos desde tu chatbot para soporte al usuario?

23/28
Recursos

¿Cómo integrar un contacto en el flujo de emergencias del bot de WhatsApp?

Al construir un bot para atención a emergencias en WhatsApp, uno de los retos es garantizar que el usuario pueda contactar rápidamente una línea de asistencia cuando detecte una situación crítica. Para ello, podemos implementar un flujo que permita enviar la información de contacto directamente desde el bot. Te explicaremos cómo hacerlo de manera detallada y eficiente.

¿Cómo configurar el flujo inicial en WhatsApp Service?

El primer paso para integrar un contacto en nuestro bot es configurar WhatsApp Service para enviar un tipo especial de mensaje: un contacto. Esto se logra mediante el siguiente esquema:

  1. Configuración inicial:

    • Inicia sesión en tu cuenta de WhatsApp y accede a la sección de configuración de servicios.
  2. Creación de lógica para enviar contacto:

    • Usa la función Sync junto con Send Contact Message.
    • Define el destinatario y el contacto que recibirán el mensaje.
  3. Uso de Axios para la lógica:

    • Implementa la lógica con Axios dentro de un bloque try-catch para manejar posibles errores.
    • Modifica la estructura esencial para enviar mensajes del tipo "Contact".
try {
    // Lógica para enviar contacto
    const response = await axios.post('URL_DEL_SERVICIO', {
        to: 'NÚMERO_DESTINATARIO',
        type: 'contacts',
        contacts: [
            {
                name: { first_name: 'Veterinaria' },
                phones: [{ number: '123456789' }],
                emails: [{ address: '[email protected]' }]
            }
        ]
    });
    console.log(response.data);
} catch (error) {
    console.error("Error al enviar contacto:", error); 
}

¿Cómo personalizar el manejador de mensajes?

Una vez configurado el flujo para enviar el contacto, es crucial adaptarlo en el Message Handle, donde se gestiona la lógica de las interacciones.

  1. Definir la función para enviar contacto:

    • Crea una función asíncrona que maneje la acción de enviar un contacto cuando se detecte una emergencia.
  2. Estructura del contacto:

    • Define todos los elementos de información que formarán parte del contacto, como la organización, teléfonos, y correos electrónicos.
  3. Implementación en el flujo:

    • Usa await llamado a WhatsAppService.sendContactMessage para enviar el objeto contacto previamente creado.
async function sendContact(user) {
    const contacto = {
        name: { first_name: 'Veterinaria Emergencia' },
        phones: [{ number: '123456789' }],
        emails: [{ address: '[email protected]' }]
    };
    await WhatsAppService.sendContactMessage(user, contacto);
}

¿Cómo mejorar la interacción del usuario con el menú del bot?

Para una experiencia de usuario fluida, el menú del bot debe ser intuitivo y funcional.

  1. Personalización de mensajes:

    • Ajusta el texto de las opciones en el menú para que sea más accesible y claro para el usuario, por ejemplo, "Realiza una pregunta acerca de tu mascota".
  2. Incorporación de casos de emergencia:

    • Asegúrate de que las opciones del menú contemplen un caso para emergencias. Implementa un manejo cuidadoso de mayúsculas y minúsculas para evitar errores.
switch (opcionSeleccionada.toLowerCase()) {
    case 'consulta':
        // lógica para consultas generales
        break;
    case 'emergencia':
        // llamado a la función para envío de contacto
        sendContact(usuario);
        break;
    // otras opciones
}

¿Qué errores comunes podemos encontrar al implementar este flujo?

Al configurar este flujo, es esencial tener cuidado con:

  • Correspondencia de texto: Asegúrate de que la mayor parte de la lógica utilice IDs u unificados, ya que las discrepancias en el caso pueden causar errores.
  • Manejo de errores: Implementa bloques try-catch para capturar y manejar excepciones.
  • Revisión y pruebas: Antes de su despliegue, prueba el flujo para asegurarte de que funciona correctamente, especialmente verificando si los mensajes de emergencia se envían de manera adecuada.

Al seguir estos pasos, tu bot de WhatsApp estará listo para manejar situaciones de emergencia, ofreciendo a los usuarios una experiencia rápida y sin contratiempos para contactar con una línea de asistencia veterinaria. ¡Sigue aprendiendo y desarrollando tus habilidades para perfeccionar las soluciones digitales que construyes!

Aportes 6

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

El error que comenta, si no me equivoco. No es por el tema del Id, sino más bien porque hay que cerrar el bloque Break, en el Switch![](https://static.platzi.com/media/user_upload/image-1180815c-da2a-4604-88ac-bd05e00e583a.jpg)
7:50 Gestionar los id en inglés nos evita este tipo de problemas ya que incluso te evitas conflictos con acentos: Consulta: `advice` Comprar: `get_products` Ayuda: `support` Emergencia: `emergency` Y ya estos son los que paso como identificador en los buttons: ```js { type: 'reply', reply: { id: 'emergency', title: 'Emergencia' } } ```{ type: 'reply', reply: { id: 'emergency', title: 'Emergencia' } }
En mi caso hice lo siguiente ```js async handleMenuOption(to, option) { let response = null; switch (option) { case "option_1": this.appointmentState[to] = { step: "name", }; response = "Please, could you type your name?"; break; case "option_2": this.assistantState[to] = { step: "question" }; response = "What is your request?"; break; case "option_3": response = "This is our location"; break; case "option_6": response = "If this is an emergency, we invite you to call our attention line"; await this.sendContact(to); } await whatsappService.sendMessage(to, response); } ``````js /*** * En el if else donde se valida el interactive * ***/ //*** } else if (message?.type === "interactive") { const option = message?.interactive?.button_reply?.id; await this.handleMenuOption(message.from, option); await whatsappService.markAsRead(message.id); } //*** ```Repo: <https://github.com/zearkiatos/medpet-chatbot-service>
Así me quedo la función para manejar respuestas de botones usando los id de cada botón ```js async handlerMenuOption(to, option){ let response; let urlCatalog; //Para pruebas se usan Urls temporales de canva :) let state = (this.orderState[to]) ? this.orderState[to] : this.dessertOrderStatus[to]; let finalOrder; switch(option){ case "option1": response = "Catálogo" await this.sendCatalogOption(to) //Otra opción es un pdf que tenga todos los productos/servicios y se envia directamrne return; case "option2": await this.sendOrderOption(to) return; case "option3": whatsappService.sendMediaMessage(to, "location", "", "", "", "7.846782", "-72.175128", "Dulce Sorpresa", "Lomas Blancas, 200 metros bajando de la Esguarnac Cordero") return; case "option4": await this.sendContact(to) return; case "order_option1": this.orderState[to] = {step: "name"}; response = "Por favor, ingresa tu nombre: " break; case "order_option2": this.dessertOrderStatus[to] = {step: "name"}; response = "Por favor, ingresa tu nombre para iniciar con el pedido." break; case "delivery_option1": state.deliveryAddress = "Retiro en tienda"; response = await this.completeOrder(to) finalOrder = true; break; case "delivery_option2": response = "Por favor, envia la dirección para la entrega." break; case "catalog_option1": urlCatalog = "https://media.canva.com/v2/image-resize/format:PNG/height:550/quality:100/uri:s3%3A%2F%2Fmedia-private.canva.com%2FQWP0c%2FMAGapKQWP0c%2F1%2Fp.png/watermark:F/width:388?csig=AAAAAAAAAAAAAAAAAAAAAKIhALWDl2mz_tkNQefVi5mYzz76FRpJhk2m044SC_yM&exp=1735499565&osig=AAAAAAAAAAAAAAAAAAAAAOOGNxaDOIalgMXBvUXjlnneZAY3Px4QYDzfvg5qtx_9&signer=media-rpc&x-canva-quality=thumbnail_large" whatsappService.sendMediaMessage(to, "image", urlCatalog, "¡Aquí puedes ver las distintas opciones de arreglos!") return; case "catalog_option2": urlCatalog = "https://media.canva.com/v2/image-resize/format:PNG/height:550/quality:100/uri:s3%3A%2F%2Fmedia-private.canva.com%2F_orbw%2FMAGapC_orbw%2F1%2Fp.png/watermark:F/width:388?csig=AAAAAAAAAAAAAAAAAAAAACAA4ljqygjs_YshF_z7QiMSlJO75bfJoBPrET0A7WdP&exp=1735502001&osig=AAAAAAAAAAAAAAAAAAAAAHnMS0gN_2Be16Z9S5Ac4wCfKSf0Eobj8ioUMvx06j3a&signer=media-rpc&x-canva-quality=thumbnail_large" whatsappService.sendMediaMessage(to, "image", urlCatalog, "¡Nuestros deliciosos postres!") return; default: response = "Lo siento, no entendi tu seleccón. por favor, elige una de las opciones" } await whatsappService.sendMessage(to, response) if(finalOrder) await whatsappService.sendInteractiveButtons(to, "Nuestra información de contacto 💗", [{ type: 'reply', reply: {id: 'option4', title: 'Contacto'}}]) } ```
Y falto el break
Es conveniente utilizar ingles en la programación y los mensajes en el idioma actual