---
url: "/de/commentful/reviews/make-integration.md"
description: "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 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 {#create-a-make-webhook}

### 1. Neues Szenario erstellen (falls du noch keins hast) {#_1-create-a-new-scenario-if-you-don-t-have-one-already}

[Make-Szenario erstellen](https://www.make.com/en/scenarios)

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

### 2. Webhooks-Modul hinzufügen {#_2-add-a-webhooks-module}

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 {#_3-copy-your-make-webhook-url}

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.

> **Tip:** 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 {#_4-configure-your-scenario-actions}

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 {#add-your-make-webhook-url-via-the-commentful-plugin}

[Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4)

Um die Make-Integration von Commentful einzurichten, erstell eine Make-Webhook-URL, wie [oben beschrieben](#create-a-make-webhook). Ö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**.

> **Tip:** 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 {#add-your-make-webhook-url-via-the-commentful-web-app}

Um die Make-Integration von Commentful einzurichten, erstell eine Make-Webhook-URL, wie [oben beschrieben](#create-a-make-webhook). Ö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`

> **Tip:** 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 {#webhook-payload-examples}

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 {#test-message}

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 {#new-comment}

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 {#reply-to-comment-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 {#text-change-request}

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 {#image-change-request}

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 {#status-update}

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 {#determining-the-data-structure}

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 {#using-the-webhook-data-in-make}

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

### Gemeinsame Felder (in jeder Payload) {#common-fields-in-every-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 {#activity-specific-fields}

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 {#common-make-scenarios}

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