--- url: "/es/commentful/reviews/zapier-integration.md" description: "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." --- # 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 {#create-a-zapier-webhook} ### 1. Crea un Zap nuevo (si aún no tienes uno) {#_1-create-a-new-zap-if-you-don-t-have-one-already} [Crea tu Zap](https://zapier.com/app/zaps) Haz clic en **Create Zap** para empezar a montar tu automatización. ### 2. Configura el disparador Webhooks by Zapier {#_2-set-up-the-webhooks-by-zapier-trigger} 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 {#_3-copy-your-zapier-webhook-url} 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. > **Tip:** 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 {#_4-configure-your-zap-action} 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 {#add-your-zapier-webhook-url-via-the-commentful-plugin} [Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4) Para configurar la integración de Commentful con Zapier, crea una URL de webhook de Zapier [siguiendo los pasos anteriores](#create-a-zapier-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 **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**. > **Tip:** 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 {#add-your-zapier-webhook-url-via-the-commentful-web-app} Para configurar la integración de Commentful con Zapier, crea una URL de webhook de Zapier [siguiendo los pasos anteriores](#create-a-zapier-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 **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/` > **Tip:** 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 {#webhook-payload-examples} 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 {#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 Zapier Webhook URL is working!", "message": "[Test Message] Yay! Your Zapier 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" } } ``` ## Usar los datos del webhook en Zapier {#using-the-webhook-data-in-zapier} Todos los payloads del webhook tienen campos coherentes y fáciles de usar: ### 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 ### Flujos de trabajo habituales con Zaps {#common-zap-workflows} 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.