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 ​

1. Créez un nouveau scénario (si vous n’en avez pas déjà un) ​

Créer votre scénario Make

Cliquez sur Create a new scenario pour commencer à construire votre automatisation.

2. Ajoutez un module Webhooks ​

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 ​

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.

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 ​

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 ​

Pour configurer l’intégration Make de Commentful, créez une URL de webhook Make en suivant les étapes ci-dessus, 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.

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 ​

Pour configurer l’intégration Make de Commentful, créez une URL de webhook Make en suivant les étapes ci-dessus, 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

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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

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

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 ​

  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