--- url: "/fr/commentful/reviews/make-integration.md" description: "Recevez, si vous le souhaitez, une notification sur un webhook Make à chaque nouveau commentaire laissé sur un lien de revue Commentful partagé avec un client." --- # Configurer un webhook Make pour les commentaires des liens de revue > Recevez, si vous le souhaitez, une notification sur un webhook Make à chaque nouveau commentaire laissé sur un lien de revue Commentful partagé avec un client. ## Créer un webhook Make {#create-a-make-webhook} ### 1. Créez un nouveau scénario (si vous n’en avez pas déjà un) {#_1-create-a-new-scenario-if-you-don-t-have-one-already} [Créer votre scénario Make](https://www.make.com/en/scenarios) Cliquez sur **Create a new scenario** pour commencer à construire votre automatisation. ### 2. Ajoutez un module Webhooks {#_2-add-a-webhooks-module} Recherchez et ajoutez le module **Webhooks** comme déclencheur. Choisissez **Custom webhook** et cliquez sur **Add** pour créer un nouveau webhook. ### 3. Copiez l’URL de votre webhook Make {#_3-copy-your-make-webhook-url} Make génère pour vous une URL de webhook unique qui ressemble à ceci : `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456` Copiez cette URL : vous en aurez besoin pour configurer Commentful. > **Tip:** Vous pouvez laisser la page de configuration de Make ouverte pendant que vous configurez Commentful, car Make attend la réception du premier webhook pour déterminer la structure des données. ### 4. Configurez les actions de votre scénario {#_4-configure-your-scenario-actions} 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, Monday ou Notion - Envoyer une notification par email via Gmail ou SendGrid - Ajouter une ligne dans Google Sheets ou Airtable - Ou vous connecter à plus de 1 500 autres applications et services ## Ajouter l’URL de votre webhook Make dans le plugin Commentful {#add-your-make-webhook-url-via-the-commentful-plugin} [Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4) Pour configurer l’intégration Make de Commentful, créez une URL de webhook Make en [suivant les étapes ci-dessus](#create-a-make-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 **Make** dans le menu déroulant **Webhook Platform**. 3. Copiez-collez l’URL de votre webhook Make : par exemple, `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456` 4. Cliquez sur **Save Webhook URL**. > **Tip:** Pour vérifier que l’intégration Make fonctionne, cliquez sur le bouton **Send Test Message** : Commentful envoie alors une notification de test à votre webhook Make. ## Ajouter l’URL de votre webhook Make dans l’application web Commentful {#add-your-make-webhook-url-via-the-commentful-web-app} Pour configurer l’intégration Make de Commentful, créez une URL de webhook Make en [suivant les étapes ci-dessus](#create-a-make-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 **Make** dans le menu déroulant **Webhook Platform**. 4. Copiez-collez l’URL de votre webhook Make : par exemple, `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456` > **Tip:** Pour vérifier que l’intégration Make fonctionne, cliquez sur le bouton **Send Test Message** : Commentful envoie alors une notification de test à votre webhook Make. ## Exemples de payloads de webhook {#webhook-payload-examples} Commentful envoie aux webhooks Make 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 Make Webhook URL is working!", "message": "[Test Message] Yay! Your Make 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" } } ``` ## Déterminer la structure des données {#determining-the-data-structure} Après l’envoi de votre premier message de test depuis Commentful, Make détecte automatiquement la structure des données du webhook. Cliquez sur **OK** dans le module webhook de Make pour confirmer la structure, puis continuez à construire votre scénario avec les champs de données disponibles. ## Utiliser les données du webhook dans Make {#using-the-webhook-data-in-make} Tous les payloads de webhook contiennent des champs cohérents et faciles d’accès, que vous pouvez mapper directement dans votre scénario Make : ### 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 ### Scénarios Make courants {#common-make-scenarios} 1. **Module Router** - Filtrez sur le champ `type` pour orienter les différentes activités vers des chemins différents 2. **Mappage direct des champs** - Mappez des champs comme `author.displayName`, `message` et `action` directement vers les modules de sortie 3. **Module HTTP** - Utilisez `image.url` pour télécharger et traiter les images importées 4. **Slack/Discord/Teams** - Transmettez des notifications mises en forme à l’aide des champs structurés 5. **Google Sheets/Airtable** - Consignez tous les retours avec des données propres et structurées 6. **Asana/Monday/Notion** - Créez des tâches dont tous les détails utiles sont déjà mappés 7. **Logique conditionnelle** - Filtrez sur `status.color` ou `type` pour déclencher des workflows précis 8. **Email** - Envoyez des notifications mises en forme avec `urls.commentful` et `urls.figma` comme liens cliquables