Configurar un webhook de Zapier para comentarios de revisión

Envía, si quieres, una notificación a un webhook de Zapier cada vez que alguien comente en un enlace de revisión de Commentful que has compartido.

Crear un webhook de Zapier ​

1. Crea un Zap nuevo (si aún no tienes uno) ​

Crea tu Zap

Haz clic en Create Zap para empezar a montar tu automatización.

2. Configura el disparador Webhooks by Zapier ​

En el paso del disparador, busca y selecciona Webhooks by Zapier.

Elige Catch Hook como tipo de evento y haz clic en Continue.

3. Copia la URL de tu webhook de Zapier ​

Zapier generará para ti una URL de webhook única con este aspecto:

https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Copia esta URL: la necesitarás para configurar Commentful.

Puedes dejar abierta la página de configuración de Zapier mientras configuras Commentful, ya que tendrás que volver a ella para probar el webhook.

4. Configura la acción de tu Zap ​

Cuando hayas configurado Commentful (consulta más abajo), puedes definir qué ocurre al recibir un comentario:

  • Enviarlo a Slack, Discord o Microsoft Teams
  • Crear una tarea en Asana, Trello o ClickUp
  • Enviar un aviso por email
  • Añadirlo a una hoja de Google Sheets o a Airtable
  • O conectarlo con más de 6000 apps

Añadir la URL de tu webhook de Zapier desde el plugin Commentful ​

Para configurar la integración de Commentful con Zapier, crea una URL de webhook de Zapier siguiendo los pasos anteriores y, después, en el plugin Commentful de Figma, abre el botón con el icono Settings (en la esquina superior derecha de la ventana del plugin):

  1. Haz clic en Enable webhook notifications for review links.

  2. Selecciona Zapier en el desplegable Webhook Platform.

  3. Copia y pega la URL de tu webhook de Zapier:

    por ejemplo, https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

  4. Haz clic en Save Webhook URL.

Para comprobar que la integración con Zapier funciona, haz clic en el botón Send Test Message, que envía una notificación de prueba desde Commentful a tu webhook de Zapier.

Añadir la URL de tu webhook de Zapier desde la app web de Commentful ​

Para configurar la integración de Commentful con Zapier, crea una URL de webhook de Zapier siguiendo los pasos anteriores y, después, en la app web de Commentful (al abrir cualquier enlace de revisión compartido en el navegador):

  1. Pulsa las teclas CTRL + K del teclado para abrir los ajustes.
  2. Haz clic en Enable webhook notifications for review links.
  3. Selecciona Zapier en el desplegable Webhook Platform.
  4. Copia y pega la URL de tu webhook de Zapier: por ejemplo, https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Para comprobar que la integración con Zapier funciona, haz clic en el botón Send Test Message, que envía una notificación de prueba desde Commentful a tu webhook de Zapier.

Ejemplos de payloads del webhook ​

Commentful envía a los webhooks de Zapier payloads JSON estructurados con campos claros y fáciles de usar. La estructura del payload varía según el tipo de actividad.

Mensaje de prueba ​

Al hacer clic en "Send Test Message", se envía este payload:

json
{
  "type": "test",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "[Test Message] Yay! Your Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier Webhook URL is working!",
  "timestamp": 1234567890
}

Comentario nuevo ​

Cuando alguien publica un comentario nuevo en un frame:

json
{
  "type": "comment",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Feedback Comment",
  "message": "This section needs more contrast for accessibility",
  "timestamp": 1234567890,
  "feedbackId": "abc123"
}

Respuesta a un hilo de comentarios ​

Cuando alguien responde a un comentario existente:

json
{
  "type": "reply",
  "author": {
    "name": "janesmith",
    "displayName": "Jane Smith (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Comment Thread Reply",
  "message": "I'll update the contrast ratio to meet WCAG AA standards",
  "timestamp": 1234567890,
  "feedbackId": "abc123"
}

Petición de cambio de texto ​

Cuando alguien pide un cambio de texto:

json
{
  "type": "text",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Text Change Request",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "textChange": {
    "original": "Sign Up Now",
    "new": "Get Started Today"
  }
}

Petición de cambio de imagen ​

Cuando alguien sube una imagen como feedback:

json
{
  "type": "image",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "New Image Change Request",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "image": {
    "url": "https://example.com/path/to/image.png",
    "fileName": "updated-logo.png"
  }
}

Cambio de estado ​

Cuando alguien cambia el estado de un comentario (por ejemplo, "To Do" → "Done"):

json
{
  "type": "status",
  "author": {
    "name": "johndoe",
    "displayName": "John Doe (Project Name)"
  },
  "project": {
    "name": "Homepage"
  },
  "frame": {
    "name": "Homepage",
    "nodeId": "123:456"
  },
  "urls": {
    "commentful": "https://commentful.hypermatic.com/share/xxx/yyy?pin=abc123",
    "figma": "https://www.figma.com/file/xxx?node-id=123"
  },
  "action": "Updated to Done",
  "message": "",
  "timestamp": 1234567890,
  "feedbackId": "abc123",
  "status": {
    "text": "Done",
    "color": "#1bc47d"
  }
}

Usar los datos del webhook en Zapier ​

Todos los payloads del webhook tienen campos coherentes y fáciles de usar:

Campos comunes (en todos los payloads) ​

  • type: el tipo de actividad, que puede ser test, comment, reply, text, image o status
  • author.name: el handle o nombre de usuario
  • author.displayName: el nombre visible con formato y el contexto del proyecto
  • project.name: el nombre del proyecto o de la página
  • frame.name: el nombre del frame de Figma
  • frame.nodeId: el ID del nodo de Figma
  • urls.commentful: enlace directo para verlo en Commentful
  • urls.figma: enlace directo para abrirlo en Figma
  • action: descripción legible de la actividad
  • message: el mensaje del comentario o del feedback (puede estar vacío en los cambios de texto, imagen o estado)
  • timestamp: marca de tiempo Unix del momento de la actividad
  • feedbackId: ID único de este elemento de feedback (no aparece en los mensajes de prueba)

Campos específicos de cada actividad ​

Según el type, hay campos adicionales disponibles:

  • textChange (cuando type es text):

    • textChange.original: el texto original
    • textChange.new: el texto nuevo solicitado

  • image (cuando type es image):

    • image.url: URL de la imagen subida
    • image.fileName: nombre de archivo original de la imagen

  • status (cuando type es status):

    • status.text: el nombre del nuevo estado (por ejemplo, "Done", "In Progress")
    • status.color: código de color hexadecimal del estado

Flujos de trabajo habituales con Zaps ​

  1. Filtrar por tipo: usa el campo type para enviar cada actividad a una acción distinta.
  2. Crear tareas: asigna los campos directamente a herramientas de gestión de tareas (Asana, Trello, ClickUp).
  3. Enviar notificaciones con formato: usa author.displayName, action y message en mensajes de Slack o Teams.
  4. Registrar en una hoja de cálculo: añade filas a Google Sheets con todos los datos estructurados.
  5. Lógica condicional: filtra por status.text o status.color para activar flujos de trabajo concretos.
  6. Descargar imágenes: usa image.url para obtener y procesar las imágenes subidas.
  7. Enlaces directos: usa urls.commentful y urls.figma para crear enlaces en los que se puede hacer clic en cualquier app.