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 ​

1. Utwórz nowy scenariusz (jeśli jeszcze go nie masz) ​

Utwórz scenariusz Make

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

2. Dodaj moduł Webhooks ​

Wyszukaj i dodaj moduł Webhooks jako wyzwalacz.

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

3. Skopiuj adres URL webhooka Make ​

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.

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

4. Skonfiguruj działania scenariusza ​

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 ​

Aby skonfigurować integrację Commentful z Make, utwórz adres URL webhooka Make zgodnie z powyższymi krokami, 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.

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 ​

Aby skonfigurować integrację Commentful z Make, utwórz adres URL webhooka Make zgodnie z powyższymi krokami, 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

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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 ​

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) ​

  • 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 ​

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 ​

  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