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 Make webhook for review link comments - You can optionally have notifications sent to a Make webhook every time a new comment is left on a Commentful review link you've shared with a client.. Machine-readable page: /commentful/reviews/make-integration.md.

Setup Make webhook for review link comments

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

Create a Make Webhook ​

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

Create your Make scenario

Click Create a new scenario to start building your automation.

2. Add a Webhooks module ​

Search for and add the Webhooks module as your trigger.

Choose Custom webhook and click Add to create a new webhook.

3. Copy your Make Webhook URL ​

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

https://hook.make.com/abcdefghijklmnopqrstuvwxyz123456

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

You can leave the Make setup page open while you configure Commentful, as Make will wait for the first webhook to arrive to determine the data structure.

4. Configure your scenario actions ​

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, Monday, or Notion
  • Send an email notification via Gmail or SendGrid
  • Add to Google Sheets or Airtable
  • Or connect to 1,500+ other apps and services

Add your Make webhook URL via the Commentful plugin ​

To set up the Commentful Make integration, you can create a Make 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 Make from the Webhook Platform dropdown

  3. Copy/paste in your Make Webhook URL:

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

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

Add your Make webhook URL via the Commentful web app ​

To set up the Commentful Make integration, you can create a Make 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 Make from the Webhook Platform dropdown

  4. Copy/paste in your Make Webhook URL:

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

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

Webhook Payload Examples ​

Commentful sends structured JSON payloads to Make 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 Make Webhook URL is working!",
  "message": "[Test Message] Yay! Your Make 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"
  }
}

Determining the Data Structure ​

After you send your first test message from Commentful, Make will automatically detect the webhook data structure. Click OK in the Make webhook module to confirm the structure, then continue building your scenario with the available data fields.

Using the Webhook Data in Make ​

All webhook payloads have consistent, easy-to-access fields that you can map directly in your Make scenario:

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 Make Scenarios ​

  1. Router Module - Filter by type field to route different activities to different paths
  2. Direct Field Mapping - Map fields like author.displayName, message, and action directly to output modules
  3. HTTP Module - Use image.url to download and process uploaded images
  4. Slack/Discord/Teams - Forward formatted notifications using structured fields
  5. Google Sheets/Airtable - Log all feedback with clean, structured data
  6. Asana/Monday/Notion - Create tasks with all relevant details pre-mapped
  7. Conditional Logic - Filter by status.color or type to trigger specific workflows
  8. Email - Send formatted notifications using urls.commentful and urls.figma for clickable links