Make-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 Make-Webhook senden.

Make-Webhook erstellen ​

1. Neues Szenario erstellen (falls du noch keins hast) ​

Make-Szenario erstellen

Klick auf Create a new scenario, um mit deiner Automatisierung zu beginnen.

2. Webhooks-Modul hinzufügen ​

Such nach dem Modul Webhooks und füge es als Trigger hinzu.

Wähl Custom webhook und klick auf Add, um einen neuen Webhook zu erstellen.

3. Make-Webhook-URL kopieren ​

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

https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Du kannst die Einrichtungsseite von Make geöffnet lassen, während du Commentful konfigurierst. Make wartet auf den ersten Webhook, um daraus die Datenstruktur zu ermitteln.

4. Aktionen des Szenarios 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, Monday oder Notion erstellen
  • Eine E-Mail-Benachrichtigung über Gmail oder SendGrid senden
  • In Google Sheets oder Airtable eintragen
  • Oder mit über 1.500 weiteren Apps und Diensten verbinden

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

Um die Make-Integration von Commentful einzurichten, erstell eine Make-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 Make.

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

    zum Beispiel https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

  4. Klick auf Save Webhook URL.

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

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

Um die Make-Integration von Commentful einzurichten, erstell eine Make-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 Make.

  4. Füge deine Make-Webhook-URL ein:

    zum Beispiel https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

Beispiele für Webhook-Payloads ​

Commentful sendet strukturierte JSON-Payloads mit klaren, einfach nutzbaren Feldern an Make-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 Make Webhook URL is working!",
  "message": "[Test Message] Yay! Your Make 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"
  }
}

Datenstruktur ermitteln ​

Nachdem du die erste Testnachricht aus Commentful gesendet hast, erkennt Make die Datenstruktur des Webhooks automatisch. Klick im Make-Webhook-Modul auf OK, um die Struktur zu bestätigen, und bau dein Szenario dann mit den verfügbaren Datenfeldern weiter.

Webhook-Daten in Make verwenden ​

Alle Webhook-Payloads haben einheitliche, leicht zugängliche Felder, die du in deinem Make-Szenario direkt zuordnen kannst:

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 Make-Szenarien ​

  1. Router-Modul – nach dem Feld type filtern, um verschiedene Aktivitäten auf verschiedene Pfade zu leiten
  2. Direkte Feldzuordnung – Felder wie author.displayName, message und action direkt Ausgabemodulen zuordnen
  3. HTTP-Modul – mit image.url hochgeladene Bilder herunterladen und verarbeiten
  4. Slack/Discord/Teams – formatierte Benachrichtigungen mit strukturierten Feldern weiterleiten
  5. Google Sheets/Airtable – sämtliches Feedback mit sauber strukturierten Daten protokollieren
  6. Asana/Monday/Notion – Aufgaben mit allen relevanten, bereits zugeordneten Details erstellen
  7. Bedingte Logik – nach status.color oder type filtern, um bestimmte Workflows auszulösen
  8. E-Mail – formatierte Benachrichtigungen mit urls.commentful und urls.figma als anklickbaren Links senden