Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Setup Zapier webhook for review link comments - You can optionally have notifications sent to a Zapier webhook every time a new comment is left on a Commentful review link you've shared with a client.. Machine-readable page: /commentful/reviews/zapier-integration.md.

Setup Zapier webhook for review link comments

You can optionally have notifications sent to a Zapier webhook every time a new comment is left on a Commentful review link you've shared with a client.

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.

You can leave the Zapier setup page open while you configure Commentful, as you'll need to come back to test the webhook.

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/

You can make sure the Zapier integration is working by clicking the Send Test Message button, which will send a test notification from Commentful to your Zapier webhook.

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/

You can make sure the Zapier integration is working by clicking the Send Test Message button, which will send a test notification from Commentful to your Zapier webhook.

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