Configurar un webhook de Make para comentarios de revisión

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

Crear un webhook de Make ​

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

Crea tu escenario de Make

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

2. Añade un módulo Webhooks ​

Busca y añade el módulo Webhooks como disparador.

Elige Custom webhook y haz clic en Add para crear un webhook nuevo.

3. Copia la URL de tu webhook de Make ​

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

https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Puedes dejar abierta la página de configuración de Make mientras configuras Commentful, ya que Make esperará a que llegue el primer webhook para determinar la estructura de los datos.

4. Configura las acciones de tu escenario ​

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, Monday o Notion
  • Enviar un aviso por email a través de Gmail o SendGrid
  • Añadirlo a Google Sheets o Airtable
  • O conectarlo con más de 1500 apps y servicios

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

Para configurar la integración de Commentful con Make, crea una URL de webhook de Make 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 Make en el desplegable Webhook Platform.

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

    por ejemplo, https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

  4. Haz clic en Save Webhook URL.

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

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

Para configurar la integración de Commentful con Make, crea una URL de webhook de Make 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 Make en el desplegable Webhook Platform.

  4. Copia y pega la URL de tu webhook de Make:

    por ejemplo, https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Ejemplos de payloads del webhook ​

Commentful envía a los webhooks de Make 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 Make Webhook URL is working!",
  "message": "[Test Message] Yay! Your Make 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"
  }
}

Determinar la estructura de los datos ​

Después de enviar tu primer mensaje de prueba desde Commentful, Make detectará automáticamente la estructura de los datos del webhook. Haz clic en OK en el módulo de webhook de Make para confirmar la estructura y sigue montando tu escenario con los campos de datos disponibles.

Usar los datos del webhook en Make ​

Todos los payloads del webhook tienen campos coherentes y fáciles de usar que puedes asignar directamente en tu escenario de Make:

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

Escenarios habituales de Make ​

  1. Módulo Router: filtra por el campo type para enviar cada actividad por una ruta distinta.
  2. Asignación directa de campos: asigna campos como author.displayName, message y action directamente a los módulos de salida.
  3. Módulo HTTP: usa image.url para descargar y procesar las imágenes subidas.
  4. Slack/Discord/Teams: reenvía notificaciones con formato usando los campos estructurados.
  5. Google Sheets/Airtable: registra todo el feedback con datos limpios y estructurados.
  6. Asana/Monday/Notion: crea tareas con todos los detalles relevantes ya asignados.
  7. Lógica condicional: filtra por status.color o type para activar flujos de trabajo concretos.
  8. Email: envía notificaciones con formato usando urls.commentful y urls.figma como enlaces en los que se puede hacer clic.