Saludo Personalizado con Nombre desde WhatsApp

Clase 12 de 28 • Curso de ChatBot con WhatsApp API

Resumen

¿Cómo personalizar el saludo de bienvenida de un bot?

Un saludo personalizado puede hacer que la interacción con un bot sea mucho más cálida y amigable. Implementar esta función en tu chatbot no solo mejora la experiencia del usuario, sino que también da un toque personal a cada mensaje. A continuación te explicamos cómo lo hemos logrado usando el senderInfo para obtener y usar el nombre del usuario.

¿Cómo obtener el nombre del usuario?

Para personalizar el saludo, primero necesitas obtener el nombre del usuario que interactúa con el bot. Esto se hace a través de una variable llamada senderInfo, que contiene información del remitente. Sigue estos pasos:

En el controller de tu aplicación, asegúrate de mandar el senderInfo al manejar los mensajes.
Usa una función para extraer el nombre del usuario del senderInfo. Esta función la llamaremos getSenderName.
Si el nombre no está disponible, utiliza el número identificador de WhatsApp o deja un mensaje genérico, como "Hola estudiante".

Aquí hay un ejemplo de cómo puedes obtener el nombre:

function getSenderName(senderInfo) {
    return senderInfo.profile.name || senderInfo['wa-id'] || '';
}

¿Cómo implementar un mensaje de saludo personalizado?

Una vez que tienes el nombre del usuario, el siguiente paso es integrar este nombre en un mensaje de bienvenida utilizando plantillas de literales (template literals en JavaScript):

const name = getSenderName(senderInfo);
const welcomeMessage = `Hola, ${name}, bienvenido a MedPet. ¿En qué puedo ayudarte hoy?`;

Al utilizar plantillas de literales, puedes manipular el mensaje fácilmente y lograr que el texto se vea más natural y acogedor.

¿Qué hacer cuando el nombre es un nombre completo?

Uno de los desafíos es que, a menudo, los usuarios configuran su nombre completo en su perfil de WhatsApp. A veces, incluir los apellidos no es necesario para un saludo cálido tipo "Hola, [nombre]". Para solucionar esto, puedes usar expresiones regulares (regex) que extraigan solo el primer nombre.

Por ejemplo, podrías implementar algo así:

function getFirstName(name) {
    const firstName = name.split(' ')[0]; // Divide el nombre completo y toma la primera porción
    return firstName;
}

Desafíos y recomendaciones

Evaluar la diversidad de los nombres: Considera que algunos usuarios podrían tener caracteres especiales o emojis en sus nombres. Asegúrate de que tu lógica los maneje adecuadamente.
Mejora constante: Prueba tu bot con diferentes usuarios y casos para afinar su funcionalidad.
Comunicación y personalización: Ofrecer saludos personalizados ayuda a construir una relación más cercana con los usuarios, incrementando el engagement y mejorando su experiencia.

¡Con estos consejos y el ejemplo de implementación, estás listo para crear un saludo más cálido y personalizado para los usuarios de tu bot! ¡Continúa explorando y mejorando tu bot para ofrecer la mejor experiencia posible!

Israel Castro

student•

const firstName = name.split(' ')[0];

Result:

Daniel Esteban Martínez Herrera

student•

a mi no me quiere dar :(

John J. Meza

student•

La sacaste del estadio!! simple y concreto. Muchas gracias

Guillermo Leonardo Montaño Medina

student•

No se si falta una clase, pero se brinca bastantes pasos en el messageHandler

Rodrigo Cisneros

student•

Si! creo que les faltó una clase subir (la clase Nro 12 si ves en la lista). La próxima clase me da error si la quiero visualizar.

Juan Sebastián Soto giraldo

student•

Primero vean la clase 12 y luego vean esta clase para que no se confundan

orlando kuan

student•

Estoy usando lo aprendido en curso para crear un servicio donde los usuarios puedan encontrar proveedores que sean más aptos a su problemática

Jose Alberto Pérez Cortes

student•

Mi solución

getSenderName(senderInfo) {

const fullName = senderInfo?.profile?.name || cliente ${senderInfo?.wa\_id || ''};

const firstName = fullName.trim().split(" ")[0];

return firstName;

}

Pablo Rosa

student•

ahi les va mi aporte para los amigos que usamos python

def handle_webhook():
    incoming_data = request.json
    message = (
        incoming_data.get("entry", [{}])[0]
        .get("changes", [{}])[0]
        .get("value", {})
        .get("messages", [{}])[0]
    )
    try:
        user_name = incoming_data.get("entry", [{}])[0].get("changes", [{}])[0].get("value", {}).get("contacts", [{}])[0].get("profile", {}).get("name")
        name = user_name.split(" ")[0]
    except:
        name = ""

    if message.get("type") == "text":
        user_id = phone_format(message.get("from"))
        message_id = message.get("id")
        message_text = message.get("text", {}).get("body")
        send_whatsapp_message(user_id, message_text, message_id, name)
        
    return jsonify({"status": "success"}), 200

Fredy Yecid Castro Agray

student•

porque solo me funciona levantar el server con node src/app.js? que debo configurar para que levante como lo muestra la clase

Sabina de la Serna Espinosa

student•

mi prioncipal problema era que no se guardaban bien los cambios y no podia iniciar el nodemon muchas veces

si tienen problemas para iniciarlo prueben el comando en la termina de vstudio:

netstat -ano | findstr :3000

les va a mostrar en que proceso se esta ocupando el puerto 3000 y luego eliminan el proceso para poder reiniciar el nodemon asi :

taskkill /PID <numero de proceso> /F

Daniel Esteban Martínez Herrera

student•

Falto una clase pone muchas cosas de un momento a otro en el src y no me da por ejemplo lo de:

const welcomeMessage = `Hola ${name}, Bienvenido a MEDPET, Tu tienda de mascotas en línea. ¿En qué puedo ayudarte hoy?`;

MARISOL ROSALDO JIMÉNEZ

student•

    const name = this.getSenderName(senderInfo).match(/^(\w+)/)?.[1] || "Rombo";

Con esto tomará la primer palabra de la cadena de texto y en dado caso de ser un emoji o algún otro carácter, mostrará el nombre que hemos predefinido. En mi caso fue "Rombo", pueden colocar cualquier otro o dejarlo simplemente vacío.

Matias Ezequiel Rivero

student•

Y me enganche dando formato al mensaje que recibimos del usuario, ya que solo responde cuando es exclusivamente que escriben solo alguna palabras del array greetings al inicio del mensaje (si ponemos "hola como estas?" ya no funciona, tampoco si el hola estaba en el medio de la frase que escribiera el usuario).

También, me encontré con la problema de que si escribías "hola, como estas?" tampoco funcionaba por la coma. Por lo cual utilicé el regex de los comentarios para limpiar el string de caracteres especiales.

Para que las palabras clave funcionaran en cualquier lugar del mensaje que escriba el usuario (nunca sabemos como pueda escribir), use el método split() para separar las palabras en un array para luego como some() buscar la primer coincidencia con el criterio de evaluación.

El método some() en JavaScript se utiliza para verificar si al menos un elemento de un array cumple con una condición específica definida por una función. Si encuentra al menos un caso que cumple, devuelve true; de lo contrario, devuelve false.

Espero que les sirva, y si hay correcciones quedo al pendiente, a continuación los resultados de ejemplo:

Diego Fernando Enriquez Bernal

student•

Así como esta tu código podría generar que dentro de una conversación alguien use la palabra "buenas" no como saludo sino como adjetivo de algo y dispare el mensaje de bienvenida?

German Moreno Leiva

student•

me di cuenta de un problema con nodemon, al iniciar el server (en mi caso 4000), lo tuve que iniciar con node src/app.js

El entorno de nodemon no reconoce bien los módulos ES6 ( type: "module").

German Moreno Leiva

student•

el archivo nodemon también tiene a si mismo dentro de el. lo cambié por lo siguiente: "exec": "node src/app.js"}

Sabina de la Serna Espinosa

student•

Primero guardo los cambies en el codigo con CTR S

Luego reestablezco el servidor desde la terminal con rs

Porque si no por alguna razon mi nodemon colapsa

Finalmente si acepta los cambios y si envia el ms con el nombre del usuario

Jovanny Alarcon C

student•

el problema puede ser el mismo que yo tenia y es cambiar la extension del archivo nodemon.js a nodemon.json

es el archivo encargado de actualizar automaticamente los cambios.

ANDRES ALFONSO MIRA MEJIA

student•

✅

Matias Ezequiel Rivero

student•

Hola comunidad, comparto el reto. Primero extraje la primer palabra del nombre configurado por el usuario, luego utilicé un regex compartido en los comentarios.

async sendWelcomeMessage(to, messageId, senderInfo) { const name = this.getSenderName(senderInfo); const firstName = name.split(' ')[0]; const formatName = firstName.replace(/[^a-zA-Z\s]/g, ''); const welcomeMessage = `Hola ${formatName}, gracias por ponerte en contacto. Bienvenido a Mendohardware. ¿En que puedo ayudarte?`; await whatsappService.sendMessage(to, welcomeMessage, messageId); };

Matias Ezequiel Rivero

student•

Quedo muy horrible el código les comparto una imagen.

JIMMY ALEXANDER MUÑOZ OBANDO

student•

Gracias por tu aporte

Jeremias Ezequiel Gonzalez

student•

Logrado

Jafet Brito

student•

Me gusto mucho el reto, porque justo eso es lo que estaba pensando, si pones todo el nombre se ve muy bot, pero si solo es el nombre se ve elegante.

Sabina de la Serna Espinosa

student•

Con el comando rs logro guardar los cambios

Sabina de la Serna Espinosa

student•

Daiana Isabel Gamez Vivas

student•

Esta es la función que estoy implementando actualmente para formatear el nombre:

nameFormat(name){
    //Eliminar emojis y caracteres especiales no alfabeticos
    const nameSinEmojis = name.replace(/[^a-zA-Z\s]/g, '');
    //Dividir el nombre el palabras
    const palabras = nameSinEmojis.split(' ');
    //Si hay más de una palabra "nombre y apellido", devolver solo la primera "nombre"
    return palabras.length > 1 ? palabras[0] : nameSinEmojis;

    //Validación con IA o en su defecto pedir directamente que devuelva el nombre
  }
```Pero debido a que hay nombres de usuario en WhastApp como "Suspensiones\_osye" o "🌹 Dios Contempla🙏 JCBA 🤗🌹" lo que pense fue hacer una petición simple a chatGPT para validar que el resultado obtenido sea un nombre valido.