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 ​

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

Créer votre Zap

Cliquez sur Create Zap pour commencer à construire votre automatisation.

2. Configurez le déclencheur Webhooks by Zapier ​

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

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.

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 ​

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 ​

Pour configurer l’intégration Zapier de Commentful, créez une URL de webhook Zapier 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 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.

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 ​

Pour configurer l’intégration Zapier de Commentful, créez une URL de webhook Zapier 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 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/

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 ​

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 ​

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 ​

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

Utiliser les données du webhook dans Zapier ​

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

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

Workflows Zap courants ​

  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