Cómo poner un chatbot con IA en tu web con n8n (paso a paso)

Mucha gente entra en tu web con una pregunta sencilla: ¿abrís el sábado?, ¿cuánto cuesta?, ¿hacéis envíos? Si no encuentra la respuesta en unos segundos, se va. Un chat con IA que conteste esas dudas con la información de tu negocio, a cualquier hora, es una de las automatizaciones más útiles que puedes añadir a una web pequeña.

En esta guía lo montamos con n8n: el flujo recibe el mensaje desde tu web, se lo pasa a un agente de IA con las instrucciones de tu negocio y devuelve la respuesta en la misma ventana de chat.

Cómo funciona, en una frase

Un pequeño widget de chat en tu web envía cada mensaje a n8n; n8n se lo da a un modelo de IA junto con tus instrucciones y lo que se ha hablado antes, y el widget muestra la respuesta.

Lo que necesitas

n8n funcionando y accesible desde internet (si aún no lo tienes, mira cómo instalar n8n gratis con Docker).
Una clave de API de un modelo de IA, por ejemplo de OpenAI.
Acceso para editar el HTML de tu web (o un hueco para «código personalizado», que tienen casi todos los creadores de webs).

Paso 1: el disparador de chat

Crea un flujo nuevo y añade el nodo Chat Trigger («When chat message received»). Es el punto de entrada: cada mensaje que alguien escriba en tu web llega aquí.

En sus opciones:

Activa Make Chat Publicly Available, para que la web pueda hablar con el flujo sin iniciar sesión en n8n.
En Mode, elige Embedded Chat, porque el chat va a vivir dentro de tu página.
En Allowed Origins (CORS), pon la dirección de tu web (por ejemplo https://tunegocio.com). Así solo tu web puede usar este chat.

Paso 2: el agente de IA

Conecta al disparador un nodo AI Agent. Dentro de él:

Chat Model: añade OpenAI Chat Model (u otro proveedor) con tu clave de API.
Memory: añade Simple Memory. Guarda los últimos mensajes de cada conversación para que el chat entienda preguntas como «¿y el domingo?» sin que el cliente tenga que repetirlo todo.

La memoria separa las conversaciones por sesión: cada visitante tiene la suya, aunque varios escriban a la vez.

Paso 3: las instrucciones de tu negocio

Lo que de verdad decide si el chat es útil es el mensaje de sistema del agente (en las opciones del nodo AI Agent, «System Message»). Ahí van tus horarios, servicios, precios orientativos, zona de reparto y qué hacer cuando no sabe algo. Un ejemplo corto:

Eres el asistente de la web de [NOMBRE DEL NEGOCIO].
Responde en el idioma del cliente, en 2-4 frases, con tono cercano.
Usa solo esta información:
- Horario: [HORARIO]
- Servicios y precios orientativos: [LISTA]
- Zona de servicio: [ZONA]
- Contacto: [TELÉFONO / EMAIL]
Si no sabes algo o el cliente quiere reservar o pedir presupuesto,
dile que deje su email o teléfono y que el equipo le contestará.
No inventes precios, plazos ni disponibilidad.

Si quieres afinarlo más, en el prompt para un agente de atención al cliente con IA explicamos cómo escribir estas instrucciones con más detalle.

Paso 4: activa el flujo y copia la URL

Guarda el flujo y actívalo. Después abre de nuevo el nodo Chat Trigger y copia la URL de producción (la de prueba solo funciona mientras tienes el editor abierto; es el mismo error que explicamos con los webhooks).

Paso 5: insertar el chat en tu web

n8n tiene un widget de chat oficial, el paquete @n8n/chat. Pega esto justo antes de </body> en tu web, cambiando la URL por la tuya:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
  createChat({
    webhookUrl: 'TU_URL_DE_PRODUCCION_DEL_CHAT_TRIGGER'
  });
</script>

Al recargar la página aparecerá un botón de chat en la esquina. El widget permite cambiar los textos de bienvenida y los colores; la documentación del paquete explica todas las opciones.

Errores frecuentes

El chat no responde en la web pero sí en el editor. Casi siempre es porque se está usando la URL de prueba, o porque el flujo no está activado.
Error de CORS en la consola del navegador. La dirección de tu web no coincide con la de Allowed Origins. Revisa que incluya https:// y que no sobre ni falte el www.
Respuestas inventadas. Si el mensaje de sistema no dice qué hacer cuando falta información, el modelo tiende a rellenar huecos. Dile claramente que no invente y que pida un contacto.
Datos personales. Si el chat recoge emails o teléfonos, menciónalo en tu política de privacidad y no le pidas al cliente más datos de los necesarios.

Ideas para ir más allá

Que el agente guarde en Google Sheets los contactos que dejan los visitantes y los puntúe, como en cualificar leads con n8n e IA.
Que pueda consultar huecos libres y reservar, enlazándolo con reservas con Google Calendar y n8n.
Usar el mismo cerebro también en WhatsApp, con el agente de WhatsApp con IA.

Atajo: los agentes ya montados

El agente de atención por WhatsApp del pack AgentKiosk trae ya escrito un prompt de atención al cliente con reglas para no inventar y pasar a una persona cuando hace falta; puedes reutilizar ese mismo prompt en el chat de tu web. Todo viene como plantilla de n8n para importar.

Si quieres empezar por algo gratis, descarga el agente de WhatsApp y echa un vistazo a 7 automatizaciones con IA para pequeños negocios.