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

# Webhook Make dla komentarzy w linkach do przeglądu

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

## Tworzenie webhooka Make {#create-a-make-webhook}

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

[Utwórz scenariusz Make](https://www.make.com/en/scenarios)

Kliknij **Create a new scenario**, aby zacząć budować automatyzację.

### 2. Dodaj moduł Webhooks {#_2-add-a-webhooks-module}

Wyszukaj i dodaj moduł **Webhooks** jako wyzwalacz.

Wybierz **Custom webhook** i kliknij **Add**, aby utworzyć nowy webhook.

### 3. Skopiuj adres URL webhooka Make {#_3-copy-your-make-webhook-url}

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

`https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456`

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

> **Tip:** Podczas konfigurowania Commentful możesz zostawić otwartą stronę konfiguracji Make. Make poczeka na pierwszy webhook, aby ustalić strukturę danych.

### 4. Skonfiguruj działania scenariusza {#_4-configure-your-scenario-actions}

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, Monday lub Notion
- Wysyłanie powiadomienia e-mail przez Gmail lub SendGrid
- Dodawanie do Arkuszy Google lub Airtable
- Lub połączenie z ponad 1500 innymi aplikacjami i usługami

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

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

Aby skonfigurować integrację Commentful z Make, utwórz adres URL webhooka Make zgodnie z [powyższymi krokami](#create-a-make-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 **Make** w menu rozwijanym **Webhook Platform**.
3. Wklej adres URL webhooka Make:

   na przykład `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456`

4. Kliknij **Save Webhook URL**.

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

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

Aby skonfigurować integrację Commentful z Make, utwórz adres URL webhooka Make zgodnie z [powyższymi krokami](#create-a-make-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 **Make** w menu rozwijanym **Webhook Platform**.
4. Wklej adres URL webhooka Make:

   na przykład `https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456`

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

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

Commentful wysyła do webhooków Make 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 Make Webhook URL is working!",
  "message": "[Test Message] Yay! Your Make 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"
  }
}
```

## Ustalanie struktury danych {#determining-the-data-structure}

Po wysłaniu pierwszej wiadomości testowej z Commentful Make automatycznie wykryje strukturę danych webhooka. Kliknij **OK** w module webhooka Make, aby potwierdzić strukturę, a potem kontynuuj budowanie scenariusza z użyciem dostępnych pól danych.

## Korzystanie z danych webhooka w Make {#using-the-webhook-data-in-make}

Wszystkie dane webhooka mają spójne, łatwo dostępne pola, które możesz mapować bezpośrednio w scenariuszu Make:

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

1. **Moduł Router** – filtruj według pola `type`, aby kierować różne aktywności różnymi ścieżkami
2. **Bezpośrednie mapowanie pól** – mapuj pola takie jak `author.displayName`, `message` i `action` bezpośrednio do modułów wyjściowych
3. **Moduł HTTP** – użyj `image.url`, aby pobierać i przetwarzać przesłane obrazy
4. **Slack/Discord/Teams** – przekazuj sformatowane powiadomienia z użyciem ustrukturyzowanych pól
5. **Arkusze Google/Airtable** – zapisuj cały feedback jako czyste, ustrukturyzowane dane
6. **Asana/Monday/Notion** – twórz zadania ze wszystkimi istotnymi szczegółami zmapowanymi z góry
7. **Logika warunkowa** – filtruj według `status.color` lub `type`, aby uruchamiać określone przepływy pracy
8. **E-mail** – wysyłaj sformatowane powiadomienia z klikalnymi linkami z `urls.commentful` i `urls.figma`