Configurar um webhook do Zapier para comentários de revisão

Se quiser, receba notificações em um webhook do Zapier a cada novo comentário em um link de revisão do Commentful compartilhado com um cliente.

Criar um webhook do Zapier ​

1. Crie um novo Zap (se ainda não tiver um) ​

Crie seu Zap

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

2. Configure o gatilho Webhooks by Zapier ​

Na etapa do gatilho, pesquise e selecione Webhooks by Zapier.

Escolha Catch Hook como tipo de evento e clique em Continue.

3. Copie a URL do webhook do Zapier ​

O Zapier vai gerar para você uma URL de webhook exclusiva, parecida com esta:

https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Copie essa URL: você vai precisar dela para configurar o Commentful.

Você pode deixar a página de configuração do Zapier aberta enquanto configura o Commentful, porque vai precisar voltar a ela para testar o webhook.

4. Configure a ação do Zap ​

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 Trello ou no ClickUp
  • Enviar uma notificação por e-mail
  • Adicionar a uma planilha do Google Sheets ou ao Airtable
  • Ou conectar a mais de 6.000 outros apps

Adicionar a URL do webhook do Zapier pelo plugin Commentful ​

Para configurar a integração do Commentful com o Zapier, crie uma URL de webhook do Zapier 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 Zapier no menu suspenso Webhook Platform

  3. Copie e cole a URL do webhook do Zapier:

    por exemplo, https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

  4. Clique em Save Webhook URL

Para conferir se a integração com o Zapier está funcionando, clique no botão Send Test Message, que envia uma notificação de teste do Commentful para o seu webhook do Zapier.

Adicionar a URL do webhook do Zapier pelo app web do Commentful ​

Para configurar a integração do Commentful com o Zapier, crie uma URL de webhook do Zapier 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 Zapier no menu suspenso Webhook Platform
  4. Copie e cole a URL do webhook do Zapier: por exemplo, https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Para conferir se a integração com o Zapier está funcionando, clique no botão Send Test Message, que envia uma notificação de teste do Commentful para o seu webhook do Zapier.

Exemplos de payload do webhook ​

O Commentful envia aos webhooks do Zapier 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 Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier 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"
  }
}

Usar os dados do webhook no Zapier ​

Todos os payloads de webhook têm campos consistentes e fáceis de acessar:

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

Fluxos de trabalho comuns no Zapier ​

  1. Filtrar por tipo: use o campo type para encaminhar atividades diferentes para ações diferentes
  2. Criar tarefas: mapeie os campos diretamente para ferramentas de gestão de tarefas (Asana, Trello, ClickUp)
  3. Enviar notificações formatadas: use author.displayName, action e message em mensagens do Slack ou do Teams
  4. Registrar em planilha: adicione linhas ao Google Sheets com todos os dados estruturados
  5. Lógica condicional: filtre por status.text ou status.color para acionar fluxos de trabalho específicos
  6. Baixar imagens: use image.url para buscar e processar as imagens enviadas
  7. Links diretos: use urls.commentful e urls.figma para criar links clicáveis em qualquer app