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 ​

1. Crie um novo cenário (se ainda não tiver um) ​

Crie seu cenário no Make

Clique em Create a new scenario para começar a montar sua automação.

2. Adicione um módulo Webhooks ​

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 ​

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.

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 ​

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 ​

Para configurar a integração do Commentful com o Make, crie uma URL de webhook do Make seguindo os passos acima 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

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 ​

Para configurar a integração do Commentful com o Make, crie uma URL de webhook do Make seguindo os passos acima 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

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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) ​

  • 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 ​

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 ​

  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