Cursos Empresas Blog Live Conf Eventos Precios

0:005:18

Recursos

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!

Saludo Personalizado con Nombre desde WhatsApp

Curso de ChatBot con WhatsApp API

Clase 12 de 28

Clase 12 / 28

Matias Ezequiel Rivero

Hace 2 años

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

Hace un año

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?

Comentarios (27)27 comentarios

Israel Castro

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

Result:

Daniel Esteban Martínez Herrera

a mi no me quiere dar :(

John J. Meza

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

Guillermo Leonardo Montaño Medina

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

Rodrigo Cisneros

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

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

orlando kuan

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

Mi solución

getSenderName(senderInfo) {

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

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

return firstName;

}

Pablo Rosa

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.

JIMMY ALEXANDER MUÑOZ OBANDO

Gracias por tu aporte

Daiana Isabel Gamez Vivas

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.

Fredy Yecid Castro Agray

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

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

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

    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.

DUBERNEY HERNANDEZ CORZO

import whatsappService from './whatsappService.js'; class MessageHandler { async handleIncomingMessage(message, senderInof) { if (message?.type === 'text') { const incomingMesage = message.text.body.toLowerCase().trim(); if(this.isGreeting(incomingMesage)){ await this.sendWelcomeMessage(message.from, message.id,senderInof) } else { const response = Echo: ${message.text.body}; await whatsappService.sendMessage(message.from, response, message.id); } await whatsappService.markAsRead(message.id); } } isGreeting(message) { const greetings = ["hola", "Hola", "Buenas Tardes", "Buenos Dias"]; return greetings.includes(message); } getSenderName(senderInof) { return senderInof.profile?.name || senderInof.wa.id; } async sendWelcomeMessage(to, messageid, senderInof){ const name = this.getSenderName(senderInof); const welcomeMessage = Hola ${name.split(' ')\[0]}; await whatsappService.sendMessage(to, welcomeMessage, messageid) } } export default new MessageHandler();

El codigo de messageHandler.js si alguien lo necesita

Darlinson Felipe Polania Camacho

Hace 2 meses

Lo que hiiste que mandando la variable y realizar el recorte dentro del mismo texto en vez de hacer el ajuste antes

Jefred Bedoya

Hace 6 meses

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

German Moreno Leiva

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

Jovanny Alarcon C

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

✅

Jeremias Ezequiel Gonzalez

Logrado

Recursos

Resumen

Saludo Personalizado con Nombre desde WhatsApp

Progreso del curso

Configuración inicial

Integración con la API de WhatsApp

Implementación de Servidor Express

Comunicación con la API de WhatsApp

Flujos de Interacción con la API de WhatsApp

Multimedia con WhatsApp API

Avances y Personalización