> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsupervisor.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# De webhook a correo con n8n en 10 minutos

> Un paso a paso real para que, cada vez que termine una llamada, se dispare un correo sin que muevas un dedo.

<div
  style={{
position: 'relative',
marginTop: '-0.5rem',
marginBottom: '2.5rem',
borderRadius: '1rem',
overflow: 'hidden',
paddingTop: '45%',
boxShadow: '0 4px 20px rgba(0,0,0,0.12)',
}}
>
  <img
    src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/crear-agente-desde-cero.jpg?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=3e736cdd39b0b8985cc32e553f58d85b"
    alt="Ilustración abstracta de un agente digital"
    style={{
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  display: 'block',
  objectFit: 'cover',
  objectPosition: 'center',
}}
    width="1424"
    height="752"
    data-path="images/blog/crear-agente-desde-cero.jpg"
  />

  <div
    style={{
  position: 'absolute',
  inset: 0,
  display: 'flex',
  alignItems: 'flex-end',
  padding: '2rem',
  background:
    'linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.1) 55%, transparent)',
}}
  >
    <div style={{ color: 'white', fontSize: '0.9rem', lineHeight: 1.4 }}>
      <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>
        Madai Garcia · Product Manager @ Leracom
      </div>

      <div style={{ opacity: 0.85 }}>02 de abril, 2026 · 10 min de lectura</div>
    </div>
  </div>
</div>

<div style={{marginTop: "2rem", marginBottom: "3rem", padding: "1.25rem 1.5rem", background: "rgba(14, 165, 233, 0.06)", borderRadius: "0.75rem", borderLeft: "3px solid #0ea5e9"}}>
  **En este post**

  * [¿Qué es n8n y por qué importa?](#qué-es-n8n-y-por-qué-importa)
  * [El mapa del flujo que vamos a armar](#el-mapa-del-flujo-que-vamos-a-armar)
  * [Paso 1 — Crear el workflow en n8n](#paso-1--crear-el-workflow-en-n8n)
  * [Paso 2 — Crear el webhook en Agents Studio apuntando a n8n](#paso-2--crear-el-webhook-en-agents-studio-apuntando-a-n8n)
  * [Paso 3 — Capturar un ejemplo real en n8n](#paso-3--capturar-un-ejemplo-real-en-n8n)
  * [Paso 4 — Agregar la condición (si quieres filtrar)](#paso-4--agregar-la-condición-si-quieres-filtrar)
  * [Paso 5 — El bloque de correo](#paso-5--el-bloque-de-correo)
  * [Paso 6 — Cambiar a Production URL](#paso-6--cambiar-a-production-url)
  * [Una capa de seguridad opcional (muy recomendada)](#una-capa-de-seguridad-opcional-muy-recomendada)
  * [Errores que vas a cometer la primera vez](#errores-que-vas-a-cometer-la-primera-vez)
  * [Ideas para escalar una vez que esto funciona](#ideas-para-escalar-una-vez-que-esto-funciona)
</div>

***

Hasta aquí ya tenemos el agente funcionando, las campañas lanzadas y los webhooks entendidos. Toca la parte donde empieza a sentirse como magia: **conectar Agents Studio con n8n para que, en cuanto una llamada termine, se mande un correo electrónico automáticamente**.

Voy a describir el caso clásico: cliente promete pagar una fecha → le llega un correo de confirmación con el detalle. Pero el mismo patrón sirve para cualquier cosa: WhatsApp, SMS, actualización de CRM, entrada en una hoja de Google Sheets…

## ¿Qué es n8n y por qué importa?

**n8n** (se pronuncia "ene-ocho-ene") es una herramienta para conectar aplicaciones **sin programar**. Arrastras bloques, los conectas con flechitas, y listo. Si has usado Zapier, es la misma idea, pero más flexible.

Tiene una versión **cloud** (la contratas como servicio) y una **open-source** (la hospedas tú mismo o tu equipo). Para esta guía no importa cuál uses; el flujo es idéntico.

## El mapa del flujo que vamos a armar

```
Agents Studio (llamada termina)
        ↓
     Webhook
        ↓
   n8n lo recibe
        ↓
  ¿Promesa de pago? Sí → Enviar email
                    No → Ignorar
```

Nada más. Dos bloques en n8n: **Webhook** y **Send Email**. Más un tercero opcional para decidir condiciones (IF).

<Frame caption="Así se ve el flujo completo en n8n: Webhook → IF → Send email. Visualmente no hay mucho más.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/n8n/01-workflow-mapa.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=c0bde238c75fbbe7c9f6c16c3bc071bd" alt="Workflow de n8n con tres nodos conectados: Webhook, IF y Send email" width="1440" height="900" data-path="images/blog/n8n/01-workflow-mapa.png" />
</Frame>

## Paso 1 — Crear el workflow en n8n

Dentro de n8n, nuevo workflow. El primer bloque siempre es el **trigger**, es decir, lo que dispara el flujo. Busca el bloque **Webhook** y agrégalo.

### Configuración del Webhook en n8n

* **HTTP Method**: `POST` (tiene que coincidir con lo que configuraste en Agents Studio).
* **Path**: déjale el que te sugiere, o pon algo descriptivo como `agents-studio-call-analyzed`.
* **Authentication**: `None` por ahora (en producción querrás validar la firma HMAC que manda Agents Studio; lo verás más abajo).
* **Respond**: `Immediately` (para que Agents Studio no se quede esperando).

Dale a **Save** y el bloque te va a mostrar una **URL**. Tiene dos formas:

* **Test URL**: se usa mientras estás editando. Sólo funciona cuando estás en modo "Listen for Test Event".
* **Production URL**: la que usarás cuando el workflow esté publicado.

**Copia la Test URL** por ahora.

<Frame caption="El nodo Webhook te muestra tanto la Test URL (para desarrollo) como la Production URL (para cuando publiques el workflow).">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/n8n/02-webhook-node.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=d665a8e4ea234226c9b0cd6e60530c66" alt="Configuración del nodo Webhook en n8n con Test URL, HTTP Method POST, Path, Authentication None y Respond Immediately" width="1440" height="900" data-path="images/blog/n8n/02-webhook-node.png" />
</Frame>

## Paso 2 — Crear el webhook en Agents Studio apuntando a n8n

Vuelve a Agents Studio → Webhooks → Nuevo webhook.

* **URL del endpoint**: pega la Test URL de n8n.
* **Método**: `POST`.
* **Descripción**: *"Prueba n8n – envío correo promesa de pago"*.
* **Secret Key**: genera una aleatoria, guárdala (luego la usaremos para validar).
* **Activar inmediatamente**: sí.

Crea el webhook. Luego entra a sus detalles y **suscríbete al evento `call.callAnalyzed`**. Ese es el que trae las variables de salida rellenadas.

## Paso 3 — Capturar un ejemplo real en n8n

Ahora en n8n, en el bloque Webhook, dale a **Listen for Test Event**. Queda como "escuchando".

De vuelta a Agents Studio:

* Ve a tu agente, haz una llamada de prueba a tu propio celular.
* Contesta, interactúa, prométele al agente lo que te pida y cuelga.
* Espera unos 10 segundos.

Cuando Speech Analytics termine de analizar la llamada, se va a disparar el `call.callAnalyzed` y n8n lo va a recibir. En el bloque Webhook vas a ver el **body completo** que llegó, con un formato similar a:

```json theme={null}
{
  "event": "call.callAnalyzed",
  "goal": {
    "achieved": true,
    "reason": "Cliente prometió pagar el 25 de abril"
  },
  "outputVariables": {
    "resultado_llamada": "prometió pagar",
    "fecha_promesa_pago": "2026-04-25",
    "monto_acordado": 1200,
    "requiere_seguimiento": true
  },
  "endReason": "end_call",
  "startedAt": "2026-04-20T10:03:49.315Z"
}
```

Este ejemplo queda guardado y puedes usarlo para construir el resto del workflow sin necesidad de hacer llamadas nuevas. Ahorra tiempo y dinero.

## Paso 4 — Agregar la condición (si quieres filtrar)

No todas las llamadas merecen un correo. Sólo las que terminan en "prometió pagar", por ejemplo.

Agrega un bloque **IF** después del Webhook. Configuración:

* Operand 1: `{{ $json.outputVariables.resultado_llamada }}`
* Operation: `Equal`
* Operand 2: `prometió pagar`

Esto crea dos ramas: **true** (se cumple la condición) y **false** (se ignora).

Conecta la rama **true** al siguiente bloque.

<Frame caption="El nodo IF: a la izquierda el schema del webhook (con el payload de Agents Studio), y a la derecha la condición que decide qué ruta tomar.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/n8n/03-if-node.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=3784aec2c798fce6579e3e80ef4f3175" alt="Configuración del nodo IF en n8n con schema del webhook a la izquierda y condiciones value1/value2 a la derecha" width="1440" height="900" data-path="images/blog/n8n/03-if-node.png" />
</Frame>

## Paso 5 — El bloque de correo

Agrega un bloque **Send Email**. n8n tiene varios disponibles:

* **SMTP básico** (cualquier proveedor de correo).
* **Gmail**, **Outlook**, **SendGrid**, **Mailgun**, **Amazon SES**…

Usa el que tu empresa ya tenga contratado. La configuración es parecida en todos.

### Ejemplo con Gmail

1. Crea la credencial OAuth (n8n te guía).
2. Rellena:
   * **To**: puedes usar un dato del webhook o una dirección fija. Si capturaste el correo del cliente en una variable (`{{ $json.outputVariables.email_cliente }}`), úsala. Si no, hay que pasarlo como variable de entrada.
   * **Subject**: *"Confirmación de su acuerdo de pago"*.
   * **Body**: aquí es donde la magia se nota. Puedes usar cualquier dato del webhook:

```
Hola {{ $json.outputVariables.customer_name }},

Gracias por la llamada de hoy. Confirmamos su acuerdo:

• Monto: $ {{ $json.outputVariables.monto_acordado }}
• Fecha de pago comprometida: {{ $json.outputVariables.fecha_promesa_pago }}

Le enviaremos un recordatorio un día antes.

Saludos,
Equipo de Bonsaif
```

Guarda el workflow y **actívalo** con el toggle de arriba a la derecha.

<Frame caption="El nodo Send email: credencial, From, To, Subject y el body HTML donde puedes inyectar las variables del webhook con `{{ $json.outputVariables.xxx }}`.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/n8n/04-send-email-node.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=3fb57ca6e4d27eff78a12f93e9ad160b" alt="Configuración del nodo Send email en n8n con campos Credential, From/To, Subject, Email Format HTML y body" width="1440" height="900" data-path="images/blog/n8n/04-send-email-node.png" />
</Frame>

## Paso 6 — Cambiar a Production URL

Una vez activo el workflow, n8n te da una **Production URL** (ligeramente distinta a la Test URL).

Vuelve a Agents Studio → edita tu webhook → cambia la URL por la Production. Guarda.

Ya está en producción. Cada llamada analizada que cumpla la condición va a disparar un correo automáticamente.

## Una capa de seguridad opcional (muy recomendada)

Agents Studio firma cada request con una cabecera `x-signature`. Puedes validarla en n8n para asegurarte de que el aviso viene realmente de Agents Studio.

Después del bloque Webhook, agrega un bloque **Function** con este pseudo-código:

```javascript theme={null}
const crypto = require('crypto');
const secret = 'TU_SECRET_KEY_DEL_WEBHOOK';
const signature = $input.first().headers['x-signature'];
const body = JSON.stringify($input.first().json);

const expected = crypto
  .createHmac('sha256', secret)
  .update(body)
  .digest('base64');

if (signature !== expected) {
  throw new Error('Firma inválida');
}

return $input.all();
```

Si alguien intenta mandarte requests falsos a tu URL de n8n, este bloque los tira antes de que se manden correos fantasma.

## Errores que vas a cometer la primera vez

**1. Usar la Test URL en producción.**
La Test URL deja de funcionar cuando cierras la pestaña de n8n. Cambia a Production URL en cuanto el flujo funcione.

**2. Usar variables que no configuraste en el agente.**
Si en el cuerpo del correo usas una variable que no existe en la personalidad (por ejemplo `telefono_emergencia`), n8n la deja vacía. Revisa los nombres.

**3. Spam.**
Si tu flujo no tiene el bloque IF y arranca una campaña de 5,000 llamadas, vas a mandar 5,000 correos sin filtrar. Siempre pon el IF.

**4. Olvidar activar el workflow.**
n8n tiene un toggle "Active" que la gente olvida prender. Si no está activo, no escucha nada.

## Ideas para escalar una vez que esto funciona

* Agregar un bloque de WhatsApp con Twilio para mandar también un SMS.
* Un bloque de Google Sheets para registrar cada promesa de pago en una hoja.
* Un bloque de Slack para avisar al equipo cuando la llamada transfirió a humano.
* Un bloque de HTTP Request para actualizar tu CRM.

Todo desde la misma URL del webhook. Un aviso, muchas reacciones.

<Tip>
  **Tu turno**

  1. Crea un workflow vacío en n8n y agrega un nodo **Webhook**. Copia la Test URL.
  2. En Agents Studio, crea un webhook hacia esa URL y suscríbete a `call.callAnalyzed`. Dispara una llamada de prueba para capturar el payload real.
  3. Agrega un nodo **IF** con una condición sobre el payload (por ejemplo `goal.achieved = true`) y conecta la rama true a un nodo **Send Email**. Activa el workflow y **cambia a la Production URL** en Agents Studio.
</Tip>

<div style={{marginTop: "2rem", padding: "1.5rem", background: "rgba(14, 165, 233, 0.06)", borderRadius: "0.75rem", borderLeft: "3px solid #0ea5e9"}}>
  **¿Te quedaste con dudas?** Escríbenos a [contacto@leracom.ai](mailto:contacto@leracom.ai).
</div>

***

*En el último post de la serie hacemos el mismo ejercicio con [Make](/blog/webhook-make-envio-correo), para quienes prefieren esa plataforma. El patrón es idéntico; cambian las pantallas.*

<div style={{marginTop: "5rem", paddingTop: "3rem", borderTop: "1px solid rgba(128, 128, 128, 0.15)"}}>
  ## Leer más del blog

  <Columns cols={3}>
    <Card title="Webhooks sin miedo" icon="plug" href="/blog/webhooks-conectar-y-suscribir" img="/images/blog/webhooks/03-eventos.png">
      **9 min · Erika Barrera**

      24 mar 2026
    </Card>

    <Card title="Webhook → correo con Make" icon="envelope-open-text" href="/blog/webhook-make-envio-correo" img="/images/blog/crear-agente-con-copilot.jpg">
      **9 min · Julio Barrera**

      10 abr 2026
    </Card>

    <Card title="Tu primer agente en 15 minutos" icon="user-plus" href="/blog/crear-agente-desde-cero" img="/images/blog/desde-cero/01-lista-agentes.png">
      **8 min · Julio Barrera**

      10 feb 2026
    </Card>
  </Columns>
</div>
