← Volver al blog

Cómo Crear un Chatbot para tu Web con n8n y Claude: Guía Paso a Paso

En menos de una tarde puedes tener un asistente virtual respondiendo preguntas de tus clientes 24/7 directamente en tu sitio web, sin escribir una sola línea de código y por menos de 20 € al mes. Esta guía te lleva por cada paso, desde la primera configuración hasta el primer mensaje respondido automáticamente.

¿Por qué un chatbot puede cambiarle la vida a tu pyme?

El 64 % de los visitantes de una web espera respuesta a sus preguntas en menos de cinco minutos. Si tu equipo no está disponible a esa hora —o si simplemente estás desbordado—, ese cliente se va a la competencia. Un chatbot no duerme, no se pone enfermo y no te cuesta una nómina.

Hasta hace poco, montar un asistente virtual de calidad requería desarrolladores, tiempo y presupuestos que las pymes no tienen. Con n8n (la plataforma de automatización de código abierto) y la API de Claude de Anthropic, ese escenario ha cambiado radicalmente. Puedes construir un chatbot que entienda el contexto, mantenga conversaciones naturales y responda con la información específica de tu negocio, todo desde una interfaz visual.

Esta guía asume que tienes una cuenta en n8n Cloud (versión gratuita suficiente para empezar) y una web básica donde puedas incrustar un pequeño fragmento de HTML/JavaScript.

Lo que necesitarás antes de empezar

Paso 1 — Crea el flujo en n8n

Entra en tu panel de n8n Cloud y haz clic en "New Workflow". A continuación añade los nodos en este orden:

1.1 Nodo Webhook (trigger)

Este nodo es la "puerta" por la que llegarán los mensajes de tus visitantes. Configúralo así:

1.2 Nodo HTTP Request (llamada a Claude)

Añade un nodo HTTP Request conectado al webhook. Configúralo con los siguientes valores:

En el campo Body (tipo JSON), introduce lo siguiente, adaptando el texto del system a tu negocio:

{
  "model": "claude-haiku-4-5-20251001",
  "max_tokens": 512,
  "system": "Eres el asistente virtual de [NOMBRE DE TU EMPRESA]. Respondes en español, de forma amable y concisa. Solo contestas preguntas relacionadas con nuestros productos/servicios. Si no sabes algo, pides que contacten por email a info@tuempresa.com.",
  "messages": [{"role": "user", "content": "{{$json.body.message}}"}]
}

La expresión {{$json.body.message}} captura automáticamente el texto que el visitante escribe en el chat.

1.3 Nodo Respond to Webhook

Conecta un nodo "Respond to Webhook" al HTTP Request. En el campo Response Body escribe:

{"reply": "{{$json.content[0].text}}"}

Esto extrae la respuesta de Claude y la devuelve al widget de tu web en formato JSON.

Activa el flujo haciendo clic en el interruptor superior derecho. ¡El backend ya está listo!

Paso 2 — Incrusta el widget en tu web

Ahora necesitas un pequeño interfaz de chat visible en tu web. Pega el siguiente código justo antes del cierre de la etiqueta </body> en tu plantilla o en el gestor de scripts de tu CMS. Sustituye TU_URL_WEBHOOK por la URL que anotaste en el paso 1.1:

<!-- GSV Chatbot Widget -->
<div id="gsv-chat"></div>
<script>
const WEBHOOK = 'TU_URL_WEBHOOK';
// (pega aquí el script completo del widget — ver repositorio de ejemplo)
</script>

El widget muestra un botón flotante en la esquina inferior derecha. Al hacer clic, se abre una ventana de chat donde el visitante escribe su pregunta, el mensaje viaja a n8n a través del webhook, n8n llama a Claude y devuelve la respuesta en menos de dos segundos.

Paso 3 — Personaliza el comportamiento del asistente

La clave para un chatbot realmente útil está en el prompt de sistema que configuraste en el nodo HTTP Request. Aquí tienes algunas personalizaciones que marcan la diferencia:

¿Cuánto va a costar?

La estructura de costes es muy asequible para una pyme:

Consejo: empieza con el modelo Claude Haiku para mantener los costes bajos. Si necesitas respuestas más complejas o largas, cambia a Claude Sonnet con un simple ajuste en el nombre del modelo dentro del nodo HTTP Request.

Próximos pasos para ir más lejos

Una vez que el chatbot básico esté funcionando, tienes varias opciones para ampliarlo:

Conclusión

Un chatbot web ya no es un lujo exclusivo de las grandes corporaciones. Con n8n y Claude puedes tener un asistente virtual funcional esta misma tarde, con una inversión mínima y sin depender de ningún desarrollador. La clave está en empezar simple: un webhook, una llamada a la API y un widget de chat. Después, la potencia para escalar está ahí cuando la necesites.

Si te atascas en algún paso o quieres implementar funcionalidades más avanzadas como la memoria de conversación o la integración con tu CRM, el equipo de GSV Agency puede ayudarte a tenerlo todo en marcha en 48 horas.

¿Quieres tu chatbot listo sin complicaciones?

Nuestro equipo lo configura, personaliza y prueba por ti. En 48 horas tendrás un asistente virtual respondiendo a tus clientes las 24 horas del día.

Solicitar diagnóstico gratuito →