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

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

### 1. Crie um novo Zap (se ainda não tiver um) {#_1-create-a-new-zap-if-you-don-t-have-one-already}

[Crie seu Zap](https://zapier.com/app/zaps)

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

### 2. Configure o gatilho Webhooks by Zapier {#_2-set-up-the-webhooks-by-zapier-trigger}

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

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.

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

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

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

Para configurar a integração do Commentful com o Zapier, crie uma URL de webhook do Zapier [seguindo os passos acima](#create-a-zapier-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 **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**

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

Para configurar a integração do Commentful com o Zapier, crie uma URL de webhook do Zapier [seguindo os passos acima](#create-a-zapier-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 **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/`

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

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 {#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 Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier 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"
  }
}
```

## Usar os dados do webhook no Zapier {#using-the-webhook-data-in-zapier}

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

### 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

### Fluxos de trabalho comuns no Zapier {#common-zap-workflows}

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