---
url: "/fr/commentful/reviews/zapier-integration.md"
description: "Recevez, si vous le souhaitez, une notification sur un webhook Zapier à chaque nouveau commentaire laissé sur un lien de revue Commentful partagé avec un client."
---

# Configurer un webhook Zapier pour les commentaires des liens de revue

> Recevez, si vous le souhaitez, une notification sur un webhook Zapier à chaque nouveau commentaire laissé sur un lien de revue Commentful partagé avec un client.

## Créer un webhook Zapier {#create-a-zapier-webhook}

### 1. Créez un nouveau Zap (si vous n’en avez pas déjà un) {#_1-create-a-new-zap-if-you-don-t-have-one-already}

[Créer votre Zap](https://zapier.com/app/zaps)

Cliquez sur **Create Zap** pour commencer à construire votre automatisation.

### 2. Configurez le déclencheur Webhooks by Zapier {#_2-set-up-the-webhooks-by-zapier-trigger}

À l’étape du déclencheur, recherchez et sélectionnez **Webhooks by Zapier**.

Choisissez **Catch Hook** comme type d’événement, puis cliquez sur **Continue**.

### 3. Copiez l’URL de votre webhook Zapier {#_3-copy-your-zapier-webhook-url}

Zapier génère pour vous une URL de webhook unique qui ressemble à ceci :

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

Copiez cette URL : vous en aurez besoin pour configurer Commentful.

> **Tip:** Vous pouvez laisser la page de configuration de Zapier ouverte pendant que vous configurez Commentful, car vous devrez y revenir pour tester le webhook.

### 4. Configurez l’action de votre Zap {#_4-configure-your-zap-action}

Une fois Commentful configuré (voir ci-dessous), vous pouvez définir ce qui se passe à la réception d’un commentaire :

- Envoyer vers Slack, Discord ou Microsoft Teams
- Créer une tâche dans Asana, Trello ou ClickUp
- Envoyer une notification par email
- Ajouter une ligne dans une feuille Google Sheets ou dans Airtable
- Ou vous connecter à plus de 6 000 autres applications

## Ajouter l’URL de votre webhook Zapier dans le plugin Commentful {#add-your-zapier-webhook-url-via-the-commentful-plugin}

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

Pour configurer l’intégration Zapier de Commentful, créez une URL de webhook Zapier en [suivant les étapes ci-dessus](#create-a-zapier-webhook), puis, dans le plugin Figma Commentful, ouvrez le bouton d’icône **Settings** (en haut à droite de la fenêtre du plugin) :

1. Cliquez sur **Enable webhook notifications for review links**.
2. Sélectionnez **Zapier** dans le menu déroulant **Webhook Platform**.
3. Copiez-collez l’URL de votre webhook Zapier :

   par exemple, `https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

4. Cliquez sur **Save Webhook URL**.

> **Tip:** Pour vérifier que l’intégration Zapier fonctionne, cliquez sur le bouton **Send Test Message** : Commentful envoie alors une notification de test à votre webhook Zapier.

## Ajouter l’URL de votre webhook Zapier dans l’application web Commentful {#add-your-zapier-webhook-url-via-the-commentful-web-app}

Pour configurer l’intégration Zapier de Commentful, créez une URL de webhook Zapier en [suivant les étapes ci-dessus](#create-a-zapier-webhook), puis, dans l’application web Commentful (en ouvrant n’importe quel lien de revue partagé dans votre navigateur) :

1. Appuyez sur les touches **CTRL + K** de votre clavier pour ouvrir les réglages.
2. Cliquez sur **Enable webhook notifications for review links**.
3. Sélectionnez **Zapier** dans le menu déroulant **Webhook Platform**.
4. Copiez-collez l’URL de votre webhook Zapier : par exemple, `https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

> **Tip:** Pour vérifier que l’intégration Zapier fonctionne, cliquez sur le bouton **Send Test Message** : Commentful envoie alors une notification de test à votre webhook Zapier.

## Exemples de payloads de webhook {#webhook-payload-examples}

Commentful envoie aux webhooks Zapier des payloads JSON structurés, avec des champs clairs et faciles à utiliser. La structure du payload varie selon le type d’activité.

### Message de test {#test-message}

Lorsque vous cliquez sur « Send Test Message », ce payload est envoyé :

```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
}
```

### Nouveau commentaire {#new-comment}

Lorsqu’une personne publie un nouveau commentaire sur 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"
}
```

### Réponse à un fil de commentaires {#reply-to-comment-thread}

Lorsqu’une personne répond à un commentaire existant :

```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"
}
```

### Demande de modification de texte {#text-change-request}

Lorsqu’une personne demande une modification de texte :

```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"
  }
}
```

### Demande de modification d’image {#image-change-request}

Lorsqu’une personne importe une image en guise de retour :

```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"
  }
}
```

### Mise à jour du statut {#status-update}

Lorsqu’une personne change le statut d’un commentaire (par exemple « 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"
  }
}
```

## Utiliser les données du webhook dans Zapier {#using-the-webhook-data-in-zapier}

Tous les payloads de webhook contiennent des champs cohérents et faciles d’accès :

### Champs communs (présents dans chaque payload) {#common-fields-in-every-payload}

- **type** - Le type d’activité : `test`, `comment`, `reply`, `text`, `image` ou `status`
- **author.name** - L’identifiant ou le nom d’utilisateur de la personne
- **author.displayName** - Le nom d’affichage mis en forme, avec le contexte du projet
- **project.name** - Le nom du projet ou de la page
- **frame.name** - Le nom du frame Figma
- **frame.nodeId** - L’ID du nœud Figma
- **urls.commentful** - Lien direct pour consulter le retour dans Commentful
- **urls.figma** - Lien direct pour l’ouvrir dans Figma
- **action** - Description lisible de l’activité
- **message** - Le commentaire ou le message du retour (peut être vide pour les modifications de texte, d’image ou de statut)
- **timestamp** - Horodatage Unix du moment où l’activité a eu lieu
- **feedbackId** - ID unique de ce retour (absent des messages de test)

### Champs propres à chaque activité {#activity-specific-fields}

Selon le `type`, des champs supplémentaires sont disponibles :

- **textChange** (lorsque `type` vaut `text`) :
  - `textChange.original` - Le texte d’origine
  - `textChange.new` - Le nouveau texte demandé

- **image** (lorsque `type` vaut `image`) :
  - `image.url` - L’URL de l’image importée
  - `image.fileName` - Le nom de fichier d’origine de l’image

- **status** (lorsque `type` vaut `status`) :
  - `status.text` - Le nom du nouveau statut (par exemple « Done », « In Progress »)
  - `status.color` - Le code couleur hexadécimal du statut

### Workflows Zap courants {#common-zap-workflows}

1. **Filtrer par type** - Utilisez le champ `type` pour orienter les différentes activités vers des actions différentes
2. **Créer des tâches** - Mappez directement les champs vers vos outils de gestion de tâches (Asana, Trello, ClickUp)
3. **Envoyer des notifications mises en forme** - Utilisez `author.displayName`, `action` et `message` dans vos messages Slack/Teams
4. **Consigner dans un tableur** - Ajoutez à Google Sheets des lignes contenant toutes les données structurées
5. **Logique conditionnelle** - Filtrez sur `status.text` ou `status.color` pour déclencher des workflows précis
6. **Télécharger les images** - Utilisez `image.url` pour récupérer et traiter les images importées
7. **Liens profonds** - Utilisez `urls.commentful` et `urls.figma` pour créer des liens cliquables dans n’importe quelle application