Mejorando los Chatbots de WhatsApp con Imágenes Incrustadas: Una Guía Paso a Paso

Las empresas buscan constantemente formas innovadoras de interactuar con sus clientes, y un método efectivo es a través de los chatbots. En este artículo, exploraremos cómo crear un chatbot sencillo que pueda enviar imágenes junto con mensajes de texto en WhatsApp. Al integrar imágenes en las respuestas de tu chatbot, puedes proporcionar una experiencia más atractiva e informativa. Veamos cómo puedes lograr esto utilizando 2Chat, n8n y un modelo de IA.

Introducción

WhatsApp se ha convertido en una plataforma popular para que las empresas se comuniquen con sus clientes. Al integrar imágenes en las respuestas de tu chatbot, puedes proporcionar una experiencia más atractiva e informativa. Veamos cómo puedes lograr esto utilizando 2Chat, n8n y un modelo de IA.

Paso 1: Configuración del Flujo del Chatbot en 2Chat

Disparador de Mensaje Recibido

El flujo comienza con un disparador de "Mensaje Recibido". Este disparador escucha los mensajes entrantes de los usuarios.

Componente de Mensaje y Espera de Respuesta

Una vez que se recibe un mensaje, el componente "Mensaje y Espera de Respuesta" captura la pregunta del usuario. Este componente es crucial ya que permite al chatbot interactuar con el usuario en tiempo real.

Solicitud HTTP al Endpoint de IA

A continuación, utilizamos una solicitud HTTP para enviar el mensaje del cliente a un endpoint de IA. El cuerpo de la solicitud incluye una estructura JSON con el último mensaje del usuario y el número de teléfono del cliente.

{
    "last_user_message": "{{message}}",  
    "customer_phone_number": "wa.phoneNumber"
}

Espera y Retorno

El servicio web no devuelve ningún mensaje directamente. En su lugar, envía el mensaje de WhatsApp directamente al usuario. Añadimos una espera de 10 segundos y luego volvemos al componente "Mensaje y Espera de Respuesta" para continuar la conversación.

Paso 2: Configuración del Servicio Web en n8n

Download n8n template:

Tutorials/n8n/n8n_image_bot.json at main · 2ChatCo/Tutorials

Contribute to 2ChatCo/Tutorials development by creating an account on GitHub.

GitHub2ChatCo

Componente Webhook

El servicio web se crea utilizando n8n. El flujo comienza con un componente Webhook, que recibe la URL de producción utilizada en el componente HTTP de 2Chat.

Configuración del Agente de IA

En el agente de IA, incluimos pautas de comportamiento y detalles sobre los productos del restaurante en el prompt del sistema. Es importante proporcionar URLs de imágenes públicamente disponibles para cada producto. Esto es esencial porque 2Chat requiere una URL de imagen públicamente disponible para incrustarla en la conversación de WhatsApp.

Prompt de sistema:

You are an assistant for a fast food restaurant. Always say hello to the user, inform that he is talking with a Restaurant and offer a simple list for the menu. Provide a brief description and price for each of the following items and add the image link avoid using \n in the text, id the answer doesn't have http add https://2Chat.co

Pizza
https://images.pexels.com/photos/842519/pexels-photo-842519.jpeg
Description: A delicious pizza with a variety of toppings including pepperoni, mushrooms, and extra cheese.
Price: $12.99
Hotdog
https://images.pexels.com/photos/30635915/pexels-photo-30635915.jpeg
Description: A classic hotdog with a juicy sausage, topped with mustard, ketchup, onions, and relish.
Price: $4.99

Burger
https://images.pexels.com/photos/1251198/pexels-photo-1251198.jpeg
Description: A mouth-watering burger with a beef patty, lettuce, tomato, cheese, and special sauce.
Price: $7.99

Conexión del Modelo LLM

Conectamos el modelo LLM (Language Model), en este caso, OpenAI, pero puedes usar tu modelo preferido. Se utiliza un buffer de memoria de ventana con el número de teléfono del cliente como clave para mantener el contexto de la conversación.

Extracción de URLs de Imágenes

El agente de IA utiliza el mensaje de WhatsApp como prompt. Un componente de código, escrito en Python, extrae la URL de la imagen de la respuesta de la IA. Esta URL se utiliza para devolver el mensaje al cliente con la imagen incrustada.

import re
# Loop over input items and add a new field called 'myNewField' to the JSON of each one
for item in _input.all():
  url =re.search('http.+\/\/.+[a-z]', item.json.output)
  if url:
    item.json.url = url[0]
  else:
    item.json.url = ""
  item.json.output=item.json.output.replace("\n","")
return _input.all()

Paso 3: Envío del Mensaje con Imagen Incrustada

Solicitud HTTP a la API de 2Chat

El último componente utiliza una solicitud HTTP para conectar n8n con 2Chat. La documentación de la API de 2Chat proporciona información detallada sobre cómo usar el método "Send Message". Debes proporcionar la URL de la imagen como parámetro, junto con el mensaje de texto.

Cuerpo JSON para la Solicitud HTTP

El componente HTTP en n8n envía solicitudes a la API de 2Chat utilizando el método "Send Message". La clave de la API se incluye en el encabezado, y se genera dinámicamente un cuerpo JSON. Este cuerpo contiene tanto el mensaje de texto como la URL de la imagen si una URL de imagen está presente en la respuesta de la LLM.

{
 "to_number": "{{ $('Webhook').item.json.body.to_number }}",
 "from_number": "+573054684700",
 "text": "{{ $json.output }}",
 "url": "{{ $json.url }}"
}

Conclusión

Siguiendo estos pasos, puedes mejorar fácilmente tus chatbots con imágenes incrustadas, proporcionando una experiencia más rica y atractiva para tus clientes. Utilizando 2Chat, n8n y un modelo de IA, puedes crear un canal de comunicación interactivo y sin problemas en WhatsApp.