Zapier-Webhook für Kommentare auf Review-Links einrichten

Lass dir optional bei jedem neuen Kommentar auf einem Commentful-Review-Link, den du mit einem Kunden geteilt hast, eine Benachrichtigung an einen Zapier-Webhook senden.

Zapier-Webhook erstellen ​

1. Neuen Zap erstellen (falls du noch keinen hast) ​

Zap erstellen

Klick auf Create Zap, um mit deiner Automatisierung zu beginnen.

2. Trigger „Webhooks by Zapier“ einrichten ​

Such im Trigger-Schritt nach Webhooks by Zapier und wähl es aus.

Wähl Catch Hook als Ereignistyp und klick dann auf Continue.

3. Zapier-Webhook-URL kopieren ​

Zapier erzeugt für dich eine eindeutige Webhook-URL, die etwa so aussieht:

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

Kopier diese URL – du brauchst sie, um Commentful einzurichten.

Du kannst die Einrichtungsseite von Zapier geöffnet lassen, während du Commentful konfigurierst, denn du musst später zurückkehren, um den Webhook zu testen.

4. Aktion deines Zaps festlegen ​

Nachdem du Commentful eingerichtet hast (siehe unten), kannst du festlegen, was passiert, wenn ein Kommentar eingeht:

  • An Slack, Discord oder Microsoft Teams senden
  • Eine Aufgabe in Asana, Trello oder ClickUp erstellen
  • Eine E-Mail-Benachrichtigung senden
  • In eine Google-Sheets-Tabelle oder Airtable eintragen
  • Oder mit über 6.000 weiteren Apps verbinden

Zapier-Webhook-URL im Commentful-Plugin hinzufügen ​

Um die Zapier-Integration von Commentful einzurichten, erstell eine Zapier-Webhook-URL, wie oben beschrieben. Öffne dann im Figma-Plugin Commentful über das Symbol Settings (oben rechts im Plugin-Fenster) die Einstellungen:

  1. Klick auf Enable webhook notifications for review links.

  2. Wähl im Dropdown Webhook Platform die Option Zapier.

  3. Füge deine Zapier-Webhook-URL ein:

    zum Beispiel https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

  4. Klick auf Save Webhook URL.

Ob die Zapier-Integration funktioniert, prüfst du mit einem Klick auf Send Test Message. Commentful sendet dann eine Testbenachrichtigung an deinen Zapier-Webhook.

Zapier-Webhook-URL in der Commentful-Web-App hinzufügen ​

Um die Zapier-Integration von Commentful einzurichten, erstell eine Zapier-Webhook-URL, wie oben beschrieben. Öffne dann einen geteilten Review-Link im Browser und geh in der Commentful-Web-App so vor:

  1. Drück auf deiner Tastatur CTRL + K, um die Einstellungen zu öffnen.
  2. Klick auf Enable webhook notifications for review links.
  3. Wähl im Dropdown Webhook Platform die Option Zapier.
  4. Füge deine Zapier-Webhook-URL ein: zum Beispiel https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Ob die Zapier-Integration funktioniert, prüfst du mit einem Klick auf Send Test Message. Commentful sendet dann eine Testbenachrichtigung an deinen Zapier-Webhook.

Beispiele für Webhook-Payloads ​

Commentful sendet strukturierte JSON-Payloads mit klaren, einfach nutzbaren Feldern an Zapier-Webhooks. Der Aufbau der Payload hängt von der Art der Aktivität ab.

Testnachricht ​

Wenn du auf „Send Test Message“ klickst, wird diese Payload gesendet:

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
}

Neuer Kommentar ​

Wenn jemand einen neuen Kommentar zu einem Frame schreibt:

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

Antwort in einem Kommentar-Thread ​

Wenn jemand auf einen vorhandenen Kommentar antwortet:

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

Angeforderte Textänderung ​

Wenn jemand eine Textänderung anfordert:

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

Angeforderte Bildänderung ​

Wenn jemand ein Bild als Feedback hochlädt:

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

Statusänderung ​

Wenn jemand den Status eines Kommentars ändert (z. B. „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"
  }
}

Webhook-Daten in Zapier verwenden ​

Alle Webhook-Payloads haben einheitliche, leicht zugängliche Felder:

Gemeinsame Felder (in jeder Payload) ​

  • type – die Art der Aktivität: test, comment, reply, text, image oder status
  • author.name – das Handle bzw. der Nutzername
  • author.displayName – der formatierte Anzeigename mit Projektkontext
  • project.name – der Name des Projekts oder der Seite
  • frame.name – der Name des Figma-Frames
  • frame.nodeId – die Node-ID in Figma
  • urls.commentful – direkter Link zur Ansicht in Commentful
  • urls.figma – direkter Link zum Öffnen in Figma
  • action – gut lesbare Beschreibung der Aktivität
  • message – der Kommentar oder die Feedback-Nachricht (kann bei Text-, Bild- oder Statusänderungen leer sein)
  • timestamp – Unix-Zeitstempel des Zeitpunkts der Aktivität
  • feedbackId – eindeutige ID dieses Feedbacks (fehlt bei Testnachrichten)

Felder je nach Aktivität ​

Je nach type stehen zusätzliche Felder zur Verfügung:

  • textChange (wenn type den Wert text hat):

    • textChange.original – der ursprüngliche Text
    • textChange.new – der angeforderte neue Text

  • image (wenn type den Wert image hat):

    • image.url – URL des hochgeladenen Bildes
    • image.fileName – ursprünglicher Dateiname des Bildes

  • status (wenn type den Wert status hat):

    • status.text – der Name des neuen Status (z. B. „Done“, „In Progress“)
    • status.color – Hex-Farbcode des Status

Typische Zap-Workflows ​

  1. Nach Typ filtern – mit dem Feld type verschiedene Aktivitäten an verschiedene Aktionen leiten
  2. Aufgaben erstellen – Felder direkt Tools für Aufgabenverwaltung zuordnen (Asana, Trello, ClickUp)
  3. Formatierte Benachrichtigungen senden – author.displayName, action und message in Nachrichten für Slack oder Teams verwenden
  4. In einer Tabelle protokollieren – Zeilen mit allen strukturierten Daten zu Google Sheets hinzufügen
  5. Bedingte Logik – nach status.text oder status.color filtern, um bestimmte Workflows auszulösen
  6. Bilder herunterladen – mit image.url hochgeladene Bilder abrufen und verarbeiten
  7. Deep Links – mit urls.commentful und urls.figma in jeder App anklickbare Links erstellen