---
url: "/de/commentful/reviews/zapier-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 Zapier-Webhook senden."
---

# 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 {#create-a-zapier-webhook}

### 1. Neuen Zap erstellen (falls du noch keinen hast) {#_1-create-a-new-zap-if-you-don-t-have-one-already}

[Zap erstellen](https://zapier.com/app/zaps)

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

### 2. Trigger „Webhooks by Zapier“ einrichten {#_2-set-up-the-webhooks-by-zapier-trigger}

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

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.

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

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

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

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

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

Um die Zapier-Integration von Commentful einzurichten, erstell eine Zapier-Webhook-URL, wie [oben beschrieben](#create-a-zapier-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 **Zapier**.
4. Füge deine Zapier-Webhook-URL ein: zum Beispiel `https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

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

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 {#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 Zapier Webhook URL is working!",
  "message": "[Test Message] Yay! Your Zapier 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"
  }
}
```

## Webhook-Daten in Zapier verwenden {#using-the-webhook-data-in-zapier}

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

### 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 Zap-Workflows {#common-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