> ## 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.

# Webhooks sin miedo: cómo tu agente le habla al resto del mundo

> La palabra asusta. El concepto es de primaria. Prometo.

<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' }}>
        Erika Barrera · Technical Lead @ Leracom
      </div>

      <div style={{ opacity: 0.85 }}>24 de marzo, 2026 · 9 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**

  * [La analogía del mesero](#la-analogía-del-mesero)
  * [Dos partes, no una](#dos-partes-no-una)
  * [Parte 1: Crear la conexión](#parte-1-crear-la-conexión)
  * [Parte 2: Suscribirte a eventos](#parte-2-suscribirte-a-eventos)
  * [¿Cómo elegir a qué eventos suscribirte?](#cómo-elegir-a-qué-eventos-suscribirte)
  * [El panel de entregas: tu mejor amigo debugueando](#el-panel-de-entregas-tu-mejor-amigo-debugueando)
  * [Los contadores de arriba](#los-contadores-de-arriba)
  * [Lo más importante: NO uses datos falsos](#lo-más-importante-no-uses-datos-falsos)
</div>

***

Si nunca has trabajado con webhooks, la palabra suena a algo que sólo la gente de desarrollo entiende. Spoiler: no. Una vez que pillas la idea, **no se puede desver**. Y abre la puerta a que tu agente no sólo atienda llamadas, sino que **le avise a todos tus sistemas lo que pasó en cada una**.

Vamos a desmitificarlo con una analogía.

## La analogía del mesero

Imagina que tu agente es un mesero en un restaurante. Cada vez que termina una mesa, podría:

**A)** Anotarlo en un cuaderno que sólo él lee.

**B)** Gritar a la cocina cada vez que pasa algo importante: "¡mesa 5, pidieron la cuenta!", "¡mesa 7, se fueron!".

La opción A es como tener un agente sin webhooks: los datos se quedan adentro y alguien tiene que ir a leerlos.

La opción B es el webhook. **Un grito estructurado** que dice "oye mundo exterior, acaba de pasar algo, aquí está el detalle".

Ese grito va por internet, llega a una URL que tú definas, y tus sistemas (CRM, correo, Slack, lo que quieras) pueden escucharlo y reaccionar.

## Dos partes, no una

La gente junta "conectar un webhook" con "usarlo" y se confunde. En realidad son dos pasos distintos:

1. **Crear la conexión**: le das al sistema una URL de destino. Es como registrar el número de teléfono al que quieres recibir SMS.
2. **Suscribirte a eventos**: le dices QUÉ avisos quieres recibir. Es como elegir si quieres que te avisen cuando llega un paquete, cuando hay una promoción, o ambas.

Nada te sirve uno sin el otro. Una conexión sin suscripciones es un teléfono que nadie va a marcar. Una suscripción sin conexión no tiene a dónde mandarse.

## Parte 1: Crear la conexión

### Dónde se hace

En la barra lateral izquierda de Agents Studio hay una sección **Webhooks** (suele aparecer bajo "Recursos", cerca de "Claves API" y "Documentación"). Dale clic.

Verás la lista de webhooks ya creados (si hay) y, arriba a la derecha, un botón morado **+ NUEVO WEBHOOK**.

<Frame caption="La sección Webhooks te muestra cada conexión con sus contadores de entregas exitosas y fallidas.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/webhooks/01-seccion-webhooks.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=84035df5bbdc25eea405b2288738db80" alt="Lista de webhooks en Agents Studio con tarjetas por cada endpoint" width="1440" height="900" data-path="images/blog/webhooks/01-seccion-webhooks.png" />
</Frame>

### Los cinco campos que vas a llenar

**1. URL del endpoint**

Es la dirección a la que Agents Studio va a mandar los avisos. Tiene que:

* Empezar con `https://` (no `http://`; seguridad).
* Apuntar a algún servicio que pueda recibir datos por internet.

Si todavía no sabes qué URL poner, ahí es donde entran n8n o Make (veremos esto en los próximos dos posts de la serie). Ellos te dan una URL "mágica" a la que puedes mandarle todo.

**2. Descripción**

Opcional pero muy recomendable. Ponle algo como *"Webhook para campaña Bulk100 – envía resultados a nuestro CRM"*. Tu yo del futuro te lo va a agradecer cuando tengas 30 webhooks.

**3. Método HTTP**

Dos opciones: `POST` o `GET`.

* **POST**: cuando Agents Studio te ENVÍA información (lo que vas a querer el 99% del tiempo).
* **GET**: cuando tu sistema quiere LEER información (menos común en este escenario).

Si no sabes, pon `POST`. Así siempre.

**4. Activar inmediatamente**

Un interruptor que deja el webhook listo para funcionar desde ya. Déjalo prendido.

**5. Seguridad — Secret Key**

Esta es la clave que usa Agents Studio para **firmar** cada aviso que manda. Tu sistema del otro lado puede usarla para verificar: *"ok, este aviso viene de verdad de Agents Studio y no de alguien haciéndose pasar por él"*.

Mínimo 16 caracteres. Ponle algo largo y aleatorio; hay generadores gratuitos en internet que te los dan con un clic.

**Guarda la Secret Key en un lugar seguro.** Después sólo la puedes consultar con un botón "Ver secreto" que requiere permisos. No la pierdas.

### Headers personalizados (opcional)

Algunos servicios de destino piden que cada mensaje lleve una cabecera extra (por ejemplo, `Authorization: Bearer xxxx`). Eso se configura aquí. Si no te dijeron que lo uses, ignóralo.

### Darle a "Crear"

<Frame caption="El formulario agrupa la información básica (URL, método, descripción) y la seguridad (Secret Key + headers) en dos bloques.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/webhooks/02-crear-webhook.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=45966a1a9370a7167ebcabe172b4d2e8" alt="Formulario Create New Webhook con los campos Endpoint URL, HTTP Method, Description, toggle de activación y Secret Key" width="1440" height="900" data-path="images/blog/webhooks/02-crear-webhook.png" />
</Frame>

Y listo. La conexión existe. Pero todavía no hace nada, porque no está suscrita a ningún evento.

## Parte 2: Suscribirte a eventos

Una vez creada la conexión, entras a los detalles del webhook. Vas a ver una sección que dice **Suscripciones a Eventos** con un botón **+ AGREGAR EVENTO**.

<Frame caption="Cada webhook puede tener múltiples suscripciones. Aquí dos activas: `call.callanalyzed` y `call.callstarted`.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/webhooks/03-eventos.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=12121c5a4957a97cf1bb260ae9222f8a" alt="Detalle del webhook Demo workshop con contadores, endpoint information y subscripciones a Call Analyzed y Call Started" width="1440" height="900" data-path="images/blog/webhooks/03-eventos.png" />
</Frame>

Al darle clic, te sale una lista con los eventos disponibles. Los más importantes son:

### `call.callStarted` — Llamada iniciada

El banderazo de salida. Se dispara **en el segundo exacto en el que el cliente contesta**. Dice:

* Qué agente está atendiendo.
* Desde qué stage empezó.
* La hora exacta.

Útil para: marcar el CRM como "en llamada", empezar un cronómetro, mandar una notificación al equipo.

### `call.callEnded` — Llamada finalizada

Se dispara cuando la llamada termina, independientemente del resultado. Dice:

* Duración total.
* Por qué terminó.
* Datos básicos.

Útil para: actualizar el estado del contacto a "contactado", generar reportes de actividad.

### `call.transferBridged` — Transferencia exitosa

Se dispara cuando el agente **transfiere a un humano y la conexión se logró establecer**. Dice:

* A qué número se transfirió.
* Si el puente funcionó.
* Enlace al transcript hasta ese momento.

Útil para: avisar al equipo humano que les va a llegar una llamada, pre-cargar contexto en la pantalla del operador.

### `call.callAnalyzed` — Llamada analizada

Se dispara **unos segundos después** de que la llamada termina, cuando Speech Analytics ya procesó el audio. Dice:

* Si el objetivo se cumplió (`goal.achieved: true/false`).
* Por qué (o por qué no).
* **Todas las variables de salida rellenadas**.
* Resumen de la conversación.
* Código y subcódigo de resultado.

**Este es el que vas a querer casi siempre.** Es el reporte definitivo de la llamada, el que tiene la "inteligencia".

## ¿Cómo elegir a qué eventos suscribirte?

Regla simple:

* **Quiero reaccionar al inicio de la llamada** → `call.callStarted`.
* **Quiero saber cuando termine, rápido** → `call.callEnded`.
* **Quiero actuar después del resultado completo** → `call.callAnalyzed`.
* **Transfiero a humanos y necesito coordinar** → `call.transferBridged`.

Lo más común: la gente se suscribe a `call.callAnalyzed` y ya. Con eso tienen todo lo que necesitan.

Puedes suscribirte a varios eventos al mismo tiempo. Cada uno dispara un aviso independiente.

## El panel de entregas: tu mejor amigo debugueando

Dentro del webhook, hay una sección **Entregas** (historial). Muestra cada aviso que se envió, con:

* Fecha y hora.
* Evento que disparó.
* Código HTTP de respuesta (200 = todo bien; 4xx o 5xx = algo falló).
* Intentos (si la primera vez falló, el sistema reintenta).

Si algo no está llegando a tu sistema, abre este panel **antes** de entrar en pánico. El 80% de las veces el problema se ve aquí: la URL estaba mal, o tu sistema devolvió un error.

<Frame caption="Cada fila es un intento de entrega con su código HTTP (200 = OK) y número de reintentos. Filtra por estado o evento cuando estés depurando.">
  <img src="https://mintcdn.com/supervisorai/aFOceNtmZJygjrCt/images/blog/webhooks/04-panel-entregas.png?fit=max&auto=format&n=aFOceNtmZJygjrCt&q=85&s=fb4e794e447f7e648c9b2e3d288675d9" alt="Panel Deliveries con tabla de entregas: fecha, status Success, evento, HTTP 200, attempts y actions" width="1440" height="900" data-path="images/blog/webhooks/04-panel-entregas.png" />
</Frame>

## Los contadores de arriba

En la vista del webhook verás tres números grandes:

* **Exitosas** — cuántos avisos llegaron bien.
* **Fallidas** — cuántos no se pudieron entregar.
* **Última** — la hora del aviso más reciente.

Si ves un número de fallidas creciendo, algo hay que revisar.

## Lo más importante: NO uses datos falsos

He visto equipos configurar webhooks a URLs como `https://example.com`, darle guardar, y pensar "ya quedó". No. Esa URL no existe. Cuando se dispare el evento, va a fallar y listo.

Antes de darle "crear" a un webhook, **asegúrate de que la URL de destino está viva y lista para recibir**. Lo más fácil: usa una herramienta tipo n8n o Make que te genera URLs "para pruebas" en un clic. Lo veremos en los siguientes dos posts.

<Tip>
  **Tu turno**

  1. Ve a [webhook.site](https://webhook.site) y copia la URL temporal que te generan.
  2. En Agents Studio crea un webhook nuevo con esa URL, método POST y una Secret Key aleatoria de 20+ caracteres.
  3. Suscríbete a `call.callAnalyzed`, haz una llamada de prueba a tu celular y cuélgala. En webhook.site revisa el payload que llegó y confirma en **Entregas** que el código HTTP fue 200.
</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>

***

*Con la teoría cubierta, en el próximo post hacemos lo bonito: [capturar un webhook en n8n](/blog/webhook-n8n-envio-correo) y disparar automáticamente un correo electrónico. Todo sin escribir una sola línea de código.*

<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="Tu primera campaña" icon="rocket" href="/blog/lanzar-tu-primera-campana" img="/images/blog/campana/04-monitoreo.png">
      **7 min · Lizbeth Suarez**

      17 mar 2026
    </Card>

    <Card title="Webhook → correo con n8n" icon="bolt" href="/blog/webhook-n8n-envio-correo" img="/images/blog/n8n/01-workflow-mapa.png">
      **10 min · Madai Garcia**

      02 abr 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>
  </Columns>
</div>
