---
url: "/pl/commentful/reviews/zapier-integration.md"
description: "Opcjonalnie możesz wysyłać powiadomienia do webhooka Zapier przy każdym nowym komentarzu w linku do przeglądu Commentful udostępnionym klientowi."
---

# Webhook Zapier dla komentarzy w linkach do przeglądu

> Opcjonalnie możesz wysyłać powiadomienia do webhooka Zapier przy każdym nowym komentarzu w linku do przeglądu Commentful udostępnionym klientowi.

## Tworzenie webhooka Zapier {#create-a-zapier-webhook}

### 1. Utwórz nowy Zap (jeśli jeszcze go nie masz) {#_1-create-a-new-zap-if-you-don-t-have-one-already}

[Utwórz Zap](https://zapier.com/app/zaps)

Kliknij **Create Zap**, aby zacząć budować automatyzację.

### 2. Skonfiguruj wyzwalacz Webhooks by Zapier {#_2-set-up-the-webhooks-by-zapier-trigger}

W kroku wyzwalacza wyszukaj i wybierz **Webhooks by Zapier**.

Jako typ zdarzenia wybierz **Catch Hook**, a potem kliknij **Continue**.

### 3. Skopiuj adres URL webhooka Zapier {#_3-copy-your-zapier-webhook-url}

Zapier wygeneruje dla Ciebie unikalny adres URL webhooka, który wygląda mniej więcej tak:

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

Skopiuj ten adres URL – będzie potrzebny do skonfigurowania Commentful.

> **Tip:** Podczas konfigurowania Commentful możesz zostawić otwartą stronę konfiguracji w Zapier, ponieważ trzeba będzie do niej wrócić, aby przetestować webhook.

### 4. Skonfiguruj działanie Zapa {#_4-configure-your-zap-action}

Po skonfigurowaniu Commentful (patrz niżej) możesz ustalić, co ma się dziać po otrzymaniu komentarza:

- Wysyłanie do Slacka, Discorda lub Microsoft Teams
- Tworzenie zadania w Asanie, Trello lub ClickUp
- Wysyłanie powiadomienia e-mail
- Dodawanie do Arkuszy Google lub Airtable
- Lub połączenie z ponad 6000 innymi aplikacjami

## Dodawanie adresu URL webhooka Zapier we wtyczce Commentful {#add-your-zapier-webhook-url-via-the-commentful-plugin}

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

Aby skonfigurować integrację Commentful z Zapier, utwórz adres URL webhooka Zapier zgodnie z [powyższymi krokami](#create-a-zapier-webhook), a potem we wtyczce Commentful do Figmy kliknij ikonę **Settings** (w prawym górnym rogu okna wtyczki):

1. Kliknij **Enable webhook notifications for review links**.
2. Wybierz **Zapier** w menu rozwijanym **Webhook Platform**.
3. Wklej adres URL webhooka Zapier:

   na przykład `https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`

4. Kliknij **Save Webhook URL**.

> **Tip:** Aby sprawdzić, czy integracja z Zapier działa, kliknij przycisk **Send Test Message**. Commentful wyśle wtedy powiadomienie testowe do Twojego webhooka Zapier.

## Dodawanie adresu URL webhooka Zapier w aplikacji webowej Commentful {#add-your-zapier-webhook-url-via-the-commentful-web-app}

Aby skonfigurować integrację Commentful z Zapier, utwórz adres URL webhooka Zapier zgodnie z [powyższymi krokami](#create-a-zapier-webhook), a potem w aplikacji webowej Commentful (po otwarciu dowolnego udostępnionego linku do przeglądu w przeglądarce):

1. Naciśnij na klawiaturze **CTRL + K**, aby otworzyć ustawienia.
2. Kliknij **Enable webhook notifications for review links**.
3. Wybierz **Zapier** w menu rozwijanym **Webhook Platform**.
4. Wklej adres URL webhooka Zapier, na przykład `https://hooks.zapier.com/hooks/catch/1234567/abcdefg/`.

> **Tip:** Aby sprawdzić, czy integracja z Zapier działa, kliknij przycisk **Send Test Message**. Commentful wyśle wtedy powiadomienie testowe do Twojego webhooka Zapier.

## Przykłady danych webhooka {#webhook-payload-examples}

Commentful wysyła do webhooków Zapier ustrukturyzowane dane JSON z czytelnymi, łatwymi w użyciu polami. Struktura danych zależy od rodzaju aktywności.

### Wiadomość testowa {#test-message}

Po kliknięciu **Send Test Message** wysyłane są takie dane:

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

### Nowy komentarz {#new-comment}

Gdy ktoś opublikuje nowy komentarz do ramki:

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

### Odpowiedź w wątku komentarza {#reply-to-comment-thread}

Gdy ktoś odpowie na istniejący komentarz:

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

### Prośba o zmianę tekstu {#text-change-request}

Gdy ktoś poprosi o zmianę tekstu:

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

### Prośba o zmianę obrazu {#image-change-request}

Gdy ktoś prześle obraz jako feedback:

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

### Zmiana statusu {#status-update}

Gdy ktoś zmieni status komentarza (np. „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"
  }
}
```

## Korzystanie z danych webhooka w Zapier {#using-the-webhook-data-in-zapier}

Wszystkie dane webhooka mają spójne, łatwo dostępne pola:

### Wspólne pola (w każdym zestawie danych) {#common-fields-in-every-payload}

- **type** – rodzaj aktywności: `test`, `comment`, `reply`, `text`, `image` lub `status`
- **author.name** – identyfikator lub nazwa użytkownika
- **author.displayName** – sformatowana nazwa wyświetlana z kontekstem projektu
- **project.name** – nazwa projektu lub strony
- **frame.name** – nazwa ramki w Figmie
- **frame.nodeId** – identyfikator węzła w Figmie
- **urls.commentful** – bezpośredni link do podglądu w Commentful
- **urls.figma** – bezpośredni link do otwarcia w Figmie
- **action** – czytelny opis aktywności
- **message** – treść komentarza lub feedbacku (może być pusta przy zmianach tekstu, obrazu lub statusu)
- **timestamp** – uniksowy znacznik czasu wystąpienia aktywności
- **feedbackId** – unikalny identyfikator tego elementu feedbacku (nie występuje w wiadomościach testowych)

### Pola zależne od rodzaju aktywności {#activity-specific-fields}

W zależności od wartości `type` dostępne są dodatkowe pola:

- **textChange** (gdy `type` to `text`):
  - `textChange.original` – pierwotny tekst
  - `textChange.new` – żądany nowy tekst

- **image** (gdy `type` to `image`):
  - `image.url` – adres URL przesłanego obrazu
  - `image.fileName` – pierwotna nazwa pliku obrazu

- **status** (gdy `type` to `status`):
  - `status.text` – nazwa nowego statusu (np. „Done”, „In Progress”)
  - `status.color` – kod koloru statusu w formacie szesnastkowym

### Typowe przepływy pracy w Zapach {#common-zap-workflows}

1. **Filtrowanie według typu** – użyj pola `type`, aby kierować różne aktywności do różnych działań
2. **Tworzenie zadań** – mapuj pola bezpośrednio do narzędzi do zarządzania zadaniami (Asana, Trello, ClickUp)
3. **Wysyłanie sformatowanych powiadomień** – użyj `author.displayName`, `action` i `message` w wiadomościach Slack/Teams
4. **Zapis w arkuszu kalkulacyjnym** – dodawaj do Arkuszy Google wiersze ze wszystkimi ustrukturyzowanymi danymi
5. **Logika warunkowa** – filtruj według `status.text` lub `status.color`, aby uruchamiać określone przepływy pracy
6. **Pobieranie obrazów** – użyj `image.url`, aby pobierać i przetwarzać przesłane obrazy
7. **Linki bezpośrednie** – użyj `urls.commentful` i `urls.figma`, aby tworzyć klikalne linki w dowolnej aplikacji