---
url: "/es/commentful/reviews/make-integration.md"
description: "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."
---

# 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 {#create-a-make-webhook}

### 1. Crea un escenario nuevo (si aún no tienes uno) {#_1-create-a-new-scenario-if-you-don-t-have-one-already}

[Crea tu escenario de Make](https://www.make.com/en/scenarios)

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

### 2. Añade un módulo Webhooks {#_2-add-a-webhooks-module}

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 {#_3-copy-your-make-webhook-url}

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.

> **Tip:** 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 {#_4-configure-your-scenario-actions}

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 {#add-your-make-webhook-url-via-the-commentful-plugin}

[Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4)

Para configurar la integración de Commentful con Make, crea una URL de webhook de Make [siguiendo los pasos anteriores](#create-a-make-webhook) 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**.

> **Tip:** 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 {#add-your-make-webhook-url-via-the-commentful-web-app}

Para configurar la integración de Commentful con Make, crea una URL de webhook de Make [siguiendo los pasos anteriores](#create-a-make-webhook) 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`

> **Tip:** 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 {#webhook-payload-examples}

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 {#test-message}

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 {#new-comment}

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 {#reply-to-comment-thread}

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 {#text-change-request}

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 {#image-change-request}

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 {#status-update}

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 {#determining-the-data-structure}

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 {#using-the-webhook-data-in-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) {#common-fields-in-every-payload}

- **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 {#activity-specific-fields}

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 {#common-make-scenarios}

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.