--- url: "/pt/commentful/reviews/make-integration.md" description: "Se quiser, receba notificações em um webhook do Make a cada novo comentário em um link de revisão do Commentful compartilhado com um cliente." --- # Configurar um webhook do Make para comentários de revisão > Se quiser, receba notificações em um webhook do Make a cada novo comentário em um link de revisão do Commentful compartilhado com um cliente. ## Criar um webhook do Make {#create-a-make-webhook} ### 1. Crie um novo cenário (se ainda não tiver um) {#_1-create-a-new-scenario-if-you-don-t-have-one-already} [Crie seu cenário no Make](https://www.make.com/en/scenarios) Clique em **Create a new scenario** para começar a montar sua automação. ### 2. Adicione um módulo Webhooks {#_2-add-a-webhooks-module} Pesquise e adicione o módulo **Webhooks** como gatilho. Escolha **Custom webhook** e clique em **Add** para criar um novo webhook. ### 3. Copie a URL do webhook do Make {#_3-copy-your-make-webhook-url} O Make vai gerar para você uma URL de webhook exclusiva, parecida com esta: `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456` Copie essa URL: você vai precisar dela para configurar o Commentful. > **Tip:** Você pode deixar a página de configuração do Make aberta enquanto configura o Commentful, porque o Make espera o primeiro webhook chegar para determinar a estrutura dos dados. ### 4. Configure as ações do cenário {#_4-configure-your-scenario-actions} Depois de configurar o Commentful (veja abaixo), você pode definir o que acontece quando um comentário é recebido: - Enviar para o Slack, o Discord ou o Microsoft Teams - Criar uma tarefa no Asana, no Monday ou no Notion - Enviar uma notificação por e-mail pelo Gmail ou pelo SendGrid - Adicionar ao Google Sheets ou ao Airtable - Ou conectar a mais de 1.500 outros apps e serviços ## Adicionar a URL do webhook do Make pelo plugin Commentful {#add-your-make-webhook-url-via-the-commentful-plugin} [Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4) Para configurar a integração do Commentful com o Make, crie uma URL de webhook do Make [seguindo os passos acima](#create-a-make-webhook) e, no plugin Commentful para Figma, abra o botão de ícone **Settings** (no canto superior direito da janela do plugin): 1. Clique em **Enable webhook notifications for review links** 2. Selecione **Make** no menu suspenso **Webhook Platform** 3. Copie e cole a URL do webhook do Make: por exemplo, `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456` 4. Clique em **Save Webhook URL** > **Tip:** Para conferir se a integração com o Make está funcionando, clique no botão **Send Test Message**, que envia uma notificação de teste do Commentful para o seu webhook do Make. ## Adicionar a URL do webhook do Make pelo app web do Commentful {#add-your-make-webhook-url-via-the-commentful-web-app} Para configurar a integração do Commentful com o Make, crie uma URL de webhook do Make [seguindo os passos acima](#create-a-make-webhook) e, no app web do Commentful (ao abrir qualquer link de revisão compartilhado no navegador): 1. Pressione as teclas **CTRL + K** no teclado para abrir as configurações 2. Clique em **Enable webhook notifications for review links** 3. Selecione **Make** no menu suspenso **Webhook Platform** 4. Copie e cole a URL do webhook do Make: por exemplo, `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456` > **Tip:** Para conferir se a integração com o Make está funcionando, clique no botão **Send Test Message**, que envia uma notificação de teste do Commentful para o seu webhook do Make. ## Exemplos de payload do webhook {#webhook-payload-examples} O Commentful envia aos webhooks do Make payloads JSON estruturados, com campos claros e fáceis de usar. A estrutura do payload varia conforme o tipo de atividade. ### Mensagem de teste {#test-message} Quando você clica em **Send Test Message**, este payload é enviado: ```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 } ``` ### Novo comentário {#new-comment} Quando alguém publica um novo comentário em um 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" } ``` ### Resposta a uma thread de comentários {#reply-to-comment-thread} Quando alguém responde a um comentário 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" } ``` ### Pedido de alteração de texto {#text-change-request} Quando alguém pede uma alteração 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" } } ``` ### Pedido de alteração de imagem {#image-change-request} Quando alguém faz upload de uma imagem 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" } } ``` ### Atualização de status {#status-update} Quando alguém muda o status de um comentário (por exemplo, “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 a estrutura dos dados {#determining-the-data-structure} Depois que você envia a primeira mensagem de teste pelo Commentful, o Make detecta automaticamente a estrutura dos dados do webhook. Clique em **OK** no módulo de webhook do Make para confirmar a estrutura e continue montando o cenário com os campos de dados disponíveis. ## Usar os dados do webhook no Make {#using-the-webhook-data-in-make} Todos os payloads de webhook têm campos consistentes e fáceis de acessar, que você pode mapear diretamente no seu cenário do Make: ### Campos comuns (em todos os payloads) {#common-fields-in-every-payload} - **type**: o tipo de atividade: `test`, `comment`, `reply`, `text`, `image` ou `status` - **author.name**: o identificador ou nome de usuário da pessoa - **author.displayName**: o nome de exibição formatado, com o contexto do projeto - **project.name**: o nome do projeto ou da página - **frame.name**: o nome do frame do Figma - **frame.nodeId**: o ID do nó no Figma - **urls.commentful**: link direto para ver no Commentful - **urls.figma**: link direto para abrir no Figma - **action**: descrição legível da atividade - **message**: a mensagem do comentário ou do feedback (pode ficar vazia em alterações de texto, imagem ou status) - **timestamp**: timestamp Unix do momento em que a atividade ocorreu - **feedbackId**: ID exclusivo deste item de feedback (não aparece nas mensagens de teste) ### Campos específicos de cada atividade {#activity-specific-fields} Dependendo do `type`, há campos adicionais disponíveis: - **textChange** (quando `type` é `text`): - `textChange.original`: o texto original - `textChange.new`: o novo texto solicitado - **image** (quando `type` é `image`): - `image.url`: URL da imagem enviada - `image.fileName`: nome original do arquivo da imagem - **status** (quando `type` é `status`): - `status.text`: o nome do novo status (por exemplo, “Done”, “In Progress”) - `status.color`: código hexadecimal da cor do status ### Cenários comuns no Make {#common-make-scenarios} 1. **Router Module**: filtre pelo campo `type` para encaminhar atividades diferentes por caminhos diferentes 2. **Mapeamento direto de campos**: mapeie campos como `author.displayName`, `message` e `action` diretamente para os módulos de saída 3. **HTTP Module**: use `image.url` para baixar e processar as imagens enviadas 4. **Slack/Discord/Teams**: encaminhe notificações formatadas usando os campos estruturados 5. **Google Sheets/Airtable**: registre todo o feedback com dados limpos e estruturados 6. **Asana/Monday/Notion**: crie tarefas com todos os detalhes relevantes já mapeados 7. **Lógica condicional**: filtre por `status.color` ou `type` para acionar fluxos de trabalho específicos 8. **E-mail**: envie notificações formatadas usando `urls.commentful` e `urls.figma` como links clicáveis