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 ​

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

Utwórz Zap

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

2. Skonfiguruj wyzwalacz Webhooks by Zapier ​

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 ​

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.

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 ​

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 ​

Aby skonfigurować integrację Commentful z Zapier, utwórz adres URL webhooka Zapier 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 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.

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 ​

Aby skonfigurować integrację Commentful z Zapier, utwórz adres URL webhooka Zapier 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 Zapier w menu rozwijanym Webhook Platform.
  4. Wklej adres URL webhooka Zapier, na przykład https://hooks.zapier.com/hooks/catch/1234567/abcdefg/.

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 ​

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 ​

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 ​

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

Korzystanie z danych webhooka w Zapier ​

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

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 przepływy pracy w Zapach ​

  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