Setup Zapier webhook for review link comments

Create a Zapier Webhook ​

1. Create a new Zap (if you don't have one already) ​

Create your Zap

Click Create Zap to start building your automation.

2. Set up the Webhooks by Zapier trigger ​

In the trigger step, search for and select Webhooks by Zapier.

Choose Catch Hook as the event type, then click Continue.

3. Copy your Zapier Webhook URL ​

Zapier will generate a unique webhook URL for you that looks like this:

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

Copy this URL - you'll need it to configure Commentful.

4. Configure your Zap action ​

After setting up Commentful (see below), you can configure what happens when a comment is received:

  • Send to Slack, Discord, or Microsoft Teams
  • Create a task in Asana, Trello, or ClickUp
  • Send an email notification
  • Add to a Google Sheet or Airtable
  • Or connect to 6,000+ other apps

Add your Zapier webhook URL via the Commentful plugin ​

To set up the Commentful Zapier integration, you can create a Zapier Webhook URL by following the steps above, and then in the Commentful Figma plugin under the Settings icon button (in the top right of the plugin window):

  1. Click Enable webhook notifications for review links

  2. Select Zapier from the Webhook Platform dropdown

  3. Copy/paste in your Zapier Webhook URL:

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

Add your Zapier webhook URL via the Commentful web app ​

To set up the Commentful Zapier integration, you can create a Zapier Webhook URL by following the steps above, and then in Commentful Web App (when opening any shared review link in your browser):

  1. Press the CTRL + K keys on your keyboard to open settings
  2. Click Enable webhook notifications for review links
  3. Select Zapier from the Webhook Platform dropdown
  4. Copy/paste in your Zapier Webhook URL: eg. https://hooks.zapier.com/hooks/catch/1234567/abcdefg/

Webhook Payload Examples ​

Commentful sends structured JSON payloads to Zapier webhooks with clear, easy-to-use fields. The payload structure varies based on the type of activity.

Test Message ​

When you click "Send Test Message", this payload is sent:

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
}

New Comment ​

When someone posts a new comment on a frame:

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

Reply to Comment Thread ​

When someone replies to an existing comment:

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

Text Change Request ​

When someone requests a text change:

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

Image Change Request ​

When someone uploads an image as 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"
  }
}

Status Update ​

When someone changes the status of a comment (e.g., "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"
  }
}

Using the Webhook Data in Zapier ​

All webhook payloads have consistent, easy-to-access fields:

Common Fields (in every payload) ​

  • type - The activity type: test, comment, reply, text, image, or status
  • author.name - The user's handle/username
  • author.displayName - The formatted display name with project context
  • project.name - The project or page name
  • frame.name - The Figma frame name
  • frame.nodeId - The Figma node ID
  • urls.commentful - Direct link to view in Commentful
  • urls.figma - Direct link to open in Figma
  • action - Human-readable description of the activity
  • message - The comment or feedback message (may be empty for text/image/status changes)
  • timestamp - Unix timestamp of when the activity occurred
  • feedbackId - Unique ID for this feedback item (not present in test messages)

Activity-Specific Fields ​

Depending on the type, additional fields are available:

  • textChange (when type is text):

    • textChange.original - The original text
    • textChange.new - The requested new text

  • image (when type is image):

    • image.url - URL to the uploaded image
    • image.fileName - Original filename of the image

  • status (when type is status):

    • status.text - The new status name (e.g., "Done", "In Progress")
    • status.color - Hex color code for the status

Common Zap Workflows ​

  1. Filter by type - Use the type field to route different activities to different actions
  2. Create tasks - Map fields directly to task management tools (Asana, Trello, ClickUp)
  3. Send formatted notifications - Use author.displayName, action, and message in Slack/Teams messages
  4. Log to spreadsheet - Add rows to Google Sheets with all the structured data
  5. Conditional logic - Filter by status.text or status.color to trigger specific workflows
  6. Download images - Use image.url to fetch and process uploaded images
  7. Deep linking - Use urls.commentful and urls.figma to create clickable links in any app