Contenido del curso
Saludo Personalizado con Nombre desde WhatsApp
¿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:
getSenderName.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
¡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
Daniel Esteban Martínez Herrera
student
John J. Meza
student
Guillermo Leonardo Montaño Medina
student
Rodrigo Cisneros
student
Juan Sebastián Soto giraldo
studentorlando kuan
student
Jose Alberto Pérez Cortes
student
Pablo Rosa
student
Daiana Isabel Gamez Vivas
student
Fredy Yecid Castro Agray
studentSabina de la Serna Espinosa
studentDaniel Esteban Martínez Herrera
student
MARISOL ROSALDO JIMÉNEZ
student
jefred bedoya
student
Matias Ezequiel Rivero
student
Diego Fernando Enriquez Bernal
student
German Moreno Leiva
studentGerman Moreno Leiva
studentSabina de la Serna Espinosa
student
Jovanny Alarcon C
student
ANDRES ALFONSO MIRA MEJIA
studentMatias Ezequiel Rivero
studentMatias Ezequiel Rivero
studentJIMMY ALEXANDER MUÑOZ OBANDO
student
Jeremias Ezequiel Gonzalez
student
Jafet Brito
studentSabina de la Serna Espinosa
studentconst firstName = name.split(' ')[0];
Result:
a mi no me quiere dar :(
La sacaste del estadio!! simple y concreto. Muchas gracias
No se si falta una clase, pero se brinca bastantes pasos en el messageHandler
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.
Primero vean la clase 12 y luego vean esta clase para que no se confundan
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
Mi solución
getSenderName(senderInfo) {
const fullName = senderInfo?.profile?.name || cliente ${senderInfo?.wa\_id || ''};
const firstName = fullName.trim().split(" ")[0];
return firstName;
}
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
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.
porque solo me funciona levantar el server con node src/app.js? que debo configurar para que levante como lo muestra la clase
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
const welcomeMessage = `Hola ${name}, Bienvenido a MEDPET, Tu tienda de mascotas en línea. ¿En qué puedo ayudarte hoy?`;
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.
Si alguien tiene un error de que al ejecutar el npm start se abre el vsc solo debe cambiar la extension del archivo de .js a .json como deberia de estar configurado para hacer la configuracion base del JSON y que se prenda correctamente el servidor
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:
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?
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").
el archivo nodemon también tiene a si mismo dentro de el. lo cambié por lo siguiente: "exec": "node src/app.js"}
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
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.
✅
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); };
Quedo muy horrible el código les comparto una imagen.
Gracias por tu aporte
Logrado
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.
Con el comando rs logro guardar los cambios
