Cliente de Chat Web para n8n: ¡Integra un Chatbot en tu Sitio Web!

¿Estás buscando una forma sencilla de añadir un cliente de chat a tu sitio web y conectarlo con tu agente de chat de n8n? ¡Has llegado al lugar correcto! En este tutorial, te explicaremos qué es este cliente de chat, cómo funciona y cómo puedes implementarlo y personalizarlo para ofrecer una experiencia interactiva a tus visitantes.

¿Qué es n8n y por qué es ideal para agentes de chat?

n8n es una herramienta de automatización de código abierto que te permite conectar diferentes aplicaciones y servicios sin necesidad de escribir código. Piensa en ella como el “cerebro” detrás de tu chatbot. En n8n, puedes construir flujos de trabajo complejos que le dan a tu agente de chat la capacidad de:

• Procesar mensajes: Entender lo que el usuario está preguntando.
• Tomar decisiones: Responder de manera inteligente basándose en la conversación.
• Integrarse con otros servicios: Conectarse con bases de datos, enviar correos electrónicos, interactuar con APIs externas y mucho más.

Esto te permite crear un chatbot muy potente sin tener que desarrollar toda la lógica desde cero.

Entendiendo el Código de tu Cliente de Chat

El código que tienes es un cliente JavaScript diseñado para mostrar la interfaz del chat en tu navegador y gestionar la comunicación con tu agente de n8n. Es la parte que tus usuarios verán y con la que interactuarán.

Aquí está el código en cuestión:

Nota: si no ves el código, es porque este contenido es exclusivo para miembros de Azul School, ya que se ejecuta en nuestro servidor y consume nuestros recursos. Si aún no tienes una cuenta, haz clic aquí para registrarte. Si ya eres miembro, haz clic aquí para iniciar sesión.

1. Configuración del Chatbot (window.chatbotConfig)

Esta sección es fundamental porque define cómo se verá y se comportará tu cliente de chat. Cada parámetro te permite personalizar la experiencia:

• webhookUrl: ¡Este es el enlace vital! Aquí debes pegar la URL del webhook de tu flujo de n8n. Es el “canal” a través del cual el cliente de chat enviará los mensajes de los usuarios a n8n y recibirá las respuestas.
• iconColor, headerColor, enviarColor, textoColor, ayudaColor: Con estos parámetros, puedes ajustar los colores de varios elementos del cliente de chat, como el icono de apertura, la cabecera del chat, el botón de enviar mensajes y los fondos de texto. Esto te permite integrar el chat visualmente con el diseño de tu sitio web.
• welcomeMessage: El mensaje inicial que tus usuarios verán al abrir el chat. Es tu primera oportunidad para interactuar y guiar la conversación.
• avatarUrl: La URL de la imagen que usará tu agente de chat como avatar. Esto le da una identidad visual a tu asistente.
• logoUrl: La URL de la imagen que aparecerá como logo en la cabecera del chat.
• helpText: Un texto de ayuda corto que se mostrará en la interfaz.

2. Carga del Script Principal (blue.js)

Nota: si no ves el código, es porque este contenido es exclusivo para miembros de Azul School, ya que se ejecuta en nuestro servidor y consume nuestros recursos. Si aún no tienes una cuenta, haz clic aquí para registrarte. Si ya eres miembro, haz clic aquí para iniciar sesión.

Esta línea es la que carga el script principal (blue.js) que renderiza el cliente de chat en tu página. Este script se encarga de toda la lógica de la interfaz de usuario, de enviar los mensajes a tu y de mostrar las respuestas que vienen de n8n. El atributo es importante porque asegura que el script se ejecute solo después de que el HTML de tu página se haya cargado completamente, lo que ayuda a que tu sitio web cargue más rápido.webhookUrldefer

Cómo Funciona la Comunicación: Cliente de Chat + Agente de n8n

La interacción entre tu cliente de chat y tu agente de n8n se da en los siguientes pasos:

1. El usuario envía un mensaje: Un visitante escribe algo en el cliente de chat de tu sitio web.
2. El cliente envía el mensaje a n8n: El script blue.js toma ese mensaje y lo envía a la webhookUrl que configuraste.
3. n8n recibe y procesa: Tu flujo de trabajo en n8n, que está “escuchando” en esa webhookUrl, recibe el mensaje. Aquí es donde tu agente de chat (creado en n8n) analiza la pregunta, ejecuta cualquier lógica que hayas definido (por ejemplo, buscar información en una base de datos, llamar a otra API) y prepara una respuesta.
4. n8n envía la respuesta de vuelta: Una vez que tu agente de chat ha formulado una respuesta, n8n la envía de vuelta al cliente de chat a través del mismo webhook.
5. El cliente muestra la respuesta: El script blue.js en tu navegador recibe la respuesta y la muestra al usuario en la ventana del chat.

Inserta el Código en tu Sitio Web

Finalmente, copia todo el bloque de código del cliente de chat y pégalo en tu archivo HTML. La ubicación ideal es justo antes de la etiqueta de cierre </body> en cada página donde quieras que aparezca el chat.

Así es como se vería en tu HTML:

Nota: si no ves el código, es porque este contenido es exclusivo para miembros de Azul School, ya que se ejecuta en nuestro servidor y consume nuestros recursos. Si aún no tienes una cuenta, haz clic aquí para registrarte. Si ya eres miembro, haz clic aquí para iniciar sesión.

¡Tu Cliente de Chat ya está funcionando!

Con estos pasos, habrás integrado exitosamente un cliente de chat personalizable en tu sitio web, listo para interactuar con el agente de chat que hayas configurado en n8n. Esto te permite mejorar la experiencia del usuario y ofrecer soporte o información de manera automatizada.

¿Tienes alguna duda sobre la personalización o la conexión con n8n? ¡Déjanos un comentario y te ayudaremos!