Webhooks en n8n: Cómo recibir datos en tiempo real con ejemplos prácticos

En esta lección nos vamos a meter de lleno en uno de los conceptos más potentes y divertidos del mundillo: los webhooks.

En lecciones anteriores ya vimos qué son las APIs, pero hoy vamos a la práctica pura y dura. Olvídate de la teoría densa, que hoy vamos a «cacharrear» y a crear cosas chulas desde el minuto uno.

¿Qué es un Webhook? Un Resumen para Entendernos

Imagina que eres parte de un equipo de bomberos. Estáis en el parque, esperando tranquilamente, listos para la acción. ¿Qué os hace salir corriendo? ¡La alarma!

Pues un webhook es exactamente eso: una alarma digital.

Nosotros creamos una URL única y especial. Esa URL se queda a la espera. En el momento en que alguien (o algo) visita esa URL, la «alarma» suena en nuestra automatización y ¡PUM! El workflow se pone en marcha.

Simple, ¿verdad? Pues ahora vamos a montarlo.

Paso 1: Creando Nuestro Primer Webhook en n8n

Lo primero es lo primero. Abre n8n y crea un nuevo workflow. Llámalo como quieras, por ejemplo, «Mi Primer Webhook».

Ahora, vamos a añadir el nodo que inicia toda la magia. Haz clic en el «+» y busca el nodo Webhook. Este será nuestro «disparador» o trigger.

Al añadirlo, verás que te aparecen varias opciones, pero fíjate en lo más importante: las URLs.

• Test URL: Es la que usaremos para hacer nuestras pruebas.
• Production URL: Es la que usarás cuando tu automatización ya esté lista y funcionando para el mundo real.

De momento, quédate con la URL de Test. Cópiala, ¡que la vamos a usar ya mismo!

Paso 2: ¡Probando la Alarma!

Antes de hacer nada más, tenemos que decirle a nuestro webhook que se ponga en modo «escucha». Piensa en el bombero que se acerca al botón de la alarma para estar atento.

En el nodo de Webhook, haz clic en el botón «Listen for Test Event». Verás que se queda como «esperando».

Ahora, con la URL de test que copiaste antes:

1. Abre una nueva pestaña en tu navegador.
2. Pega la URL.
3. Dale a Intro.

Te saldrá un mensaje simple en el navegador, algo como {«message»:»Workflow started»}. Pero lo realmente interesante ha pasado en n8n. Si vuelves, verás que el webhook ha recibido datos. ¡Ha funcionado! La alarma ha sonado.

Verás un montón de información: datos de tu navegador, tu IP, los headers… n8n recoge todo el «contexto» de la llamada. ¡Es una pasada la de información que tenemos ya solo con esto!

Paso 3: La Magia de los Webhooks – Pasar Datos

Aquí es donde empieza la verdadera fiesta. No solo podemos «hacer sonar la alarma», sino que podemos enviarle mensajes. Podemos pasarle datos directamente desde la URL.

¿Cómo? Con los parámetros.

Vamos a probarlo. Vuelve a poner tu webhook en modo «Listen for Test Event». Ahora, coge tu URL de test y vamos a modificarla un poco en el navegador.

Para añadir parámetros, usamos el símbolo de interrogación ? después de la URL. La estructura es nombre_variable=valor_variable.

Por ejemplo, peguemos esto en el navegador:

TU_URL_DE_WEBHOOK?nombre=Jero

Si quieres añadir más de un parámetro, los unes con el símbolo &. Por ejemplo:

TU_URL_DE_WEBHOOK?nombre=Jero&apellido=Cuevas

Dale a Intro. Ahora mira los datos que ha recibido n8n. Verás una nueva sección llamada query donde aparecen las variables que le hemos mandado: nombre: «Jero» y apellido: «Cuevas».

¡Boom! Acabamos de enviarle información a nuestra automatización directamente desde una URL. Las posibilidades de esto son infinitas.

Paso 4: ¡No Solo Recibas, También Responde!

Nuestro webhook ya sabe recibir datos, pero… ¿y si quisiéramos contestar algo? Por ejemplo, recibir un nombre y devolver un saludo personalizado.

Para eso, necesitamos un segundo nodo. Busca y añade el nodo Respond to Webhook.

Ahora tenemos que hacer un pequeño ajuste en el nodo inicial (el trigger):

1. Haz clic en el nodo Webhook.
2. Busca la opción Response Mode.
3. Cámbiala a Using ‘Respond to Webhook’ Node.

Con esto le estamos diciendo: «Oye, cuando te llamen, no contestes tú inmediatamente. Espera a que termine el workflow y ya contestará el nodo del final».

Vamos a montar un ejemplo súper chulo: un generador de cuentos con Inteligencia Artificial.

1. Webhook Trigger: Lo dejamos como está, preparado para recibir un nombre.
2. Nodo de IA (por ejemplo, OpenAI): Añade un nodo de IA entre el trigger y el de respuesta.
3. Configura la IA: En el prompt (la instrucción que le das), vamos a decirle algo como:
   • «Crea un cuento corto y divertido de no más de 50 palabras sobre una persona llamada [AQUÍ VA EL NOMBRE]. No uses comillas en el texto.»
4. Conecta los datos: ¿Recuerdas que el webhook recibía un nombre? Pues ahora vamos a usarlo. Arrastra la variable nombre desde la salida del webhook hasta el lugar del prompt donde pusiste «[AQUÍ VA EL NOMBRE]».
5. Configura la Respuesta: Ahora, en el nodo Respond to Webhook, vamos a decirle que conteste con el cuento que ha generado la IA. Simplemente, arrastra la salida de texto (el content o choices[0].message.content) del nodo de IA al campo de respuesta.

Paso 5: La Prueba de Fuego

¡Ya lo tenemos todo montado! Vamos a probar el circuito completo:

1. Dale a «Listen for Test Event» en tu nodo Webhook.
2. Vete al navegador y usa la URL de test con un nombre, por ejemplo: TU_URL_DE_WEBHOOK?nombre=Maria
3. Dale a Intro.

Espera unos segundos… y ¡tachán! En la pantalla del navegador debería aparecer el cuento divertido que la IA ha creado sobre María.

¡Un Nivel Más Allá! Respondiendo con HTML

Para terminar de flipar, ¿sabías que en vez de devolver un texto simple, puedes devolver una página web entera?

En el nodo Respond to Webhook, en lugar de simplemente pegar el texto del cuento, puedes escribir código HTML. Puedes crear un título, poner el texto en negrita, añadir un botón… ¡lo que quieras!

Por ejemplo, podrías poner algo así en el campo de respuesta (asegúrate de usar el modo de expresión para combinar texto y variables):codeHtml

<html>
  <body style="font-family: sans-serif; text-align: center;">
    <h1>Un cuento para {{ $json.query.nombre }}</h1>
    <p>{{ $json["Nodo de IA"]["choices"][0].message.content }}</p>
  </body>
</html>

(Nota: la ruta para coger las variables puede cambiar un poco, ¡solo tienes que arrastrarla!)

Si ahora vuelves a llamar a la URL, la respuesta será una página con un título y el cuento bien formateado. ¡Acabas de crear una mini-API que genera contenido dinámico!

¡Enhorabuena!

Hoy has aprendido a:

• Crear un webhook que inicie una automatización.
• Pasarle datos a través de la URL.
• Procesar esos datos (¡incluso con IA!).
• Devolver una respuesta personalizada, tanto en texto como en HTML.

Esto que acabas de hacer es la base de muchísimas automatizaciones avanzadas. ¡Es una auténtica pasada!

Espero que te haya flipado tanto como a mí.

¡A seguir automatizando!