---
url: "/commentful/reviews/make-integration.md"
description: "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."
---

# 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](https://www.make.com/en/scenarios)

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.

> **Tip:** 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

[Video](/assets/videos/commentful/reviews/save-slack-webhook.mp4)

To set up the Commentful Make integration, you can create a Make Webhook URL by [following the steps above](#create-a-make-webhook), 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`

> **Tip:** 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](#create-a-make-webhook), 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`

> **Tip:** 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