---
url: https://plugin.stripo.email/editor-configuration/commenting.md
---
# Commenting 

The Commenting feature allows users to discuss email designs directly within the editor, highlight specific elements that need attention, and collaborate in real time with other team members. Comments can include text, replies, mentions, and resolution tracking.

When enabled in your Plugin settings, it becomes accessible in the editor interface, adding a **Comments** tab to the settings panel of each email message or template.

::: image-wrap
![](/img/plugin/new/image230.webp){width=1424 height=355}
:::

## How It Works

When the **Comments** tab is available in the editor, users can start collaborating on email design directly inside the template.

To add a comment, a user opens the **Comments** tab and clicks the **Add comment** icon (or uses the shortcut shown in the tooltip).

::: image-wrap
![](/img/plugin/new/image231.webp){width=1234 height=421}
:::

Once activated, the cursor changes to a crosshair — this means the user can click anywhere within the email area to place a **pin**.

A comment box appears next to that pin, where the user can enter feedback or suggestions.

Each pin is visually tied to a specific part of the email (for example, an image, button, or text block) so everyone knows exactly which element the comment refers to.

Inside the **Comments** panel, users can:

* write new comments or reply to existing ones,
* mention teammates using the **@** symbol,
* leave emoji reactions,
* edit or delete their own comments,
* resolve threads once they’re no longer relevant.

::: image-wrap
![](/img/plugin/new/image232.webp){width=1097 height=323}
:::

The system automatically tracks which comments each user has viewed. When a user opens an email and hovers the cursor over the comments they’ve already seen they are automatically marked as **read**, while new ones appear as **unread**, helping everyone stay on top of what’s new.

Every comment includes information about:

* the author (user ID and name),
* the element it’s attached to,
* and the text content of the discussion.

When the email is reopened, the editor restores all existing comments and automatically synchronizes the authors’ names and avatars using the integration callbacks — so users always see up-to-date information about who left each comment.

## How to Activate

The Commenting feature is managed from your **Plugin Settings** in the Stripo account. You can find it under the **Commenting** section of the left-hand menu — this is where you control whether commenting is available for users of your Plugin.

::: image-wrap
![](/img/plugin/new/image233.webp){width=1178 height=620}
:::

When the toggle is switched **on**, commenting becomes active for all editor instances connected to your Plugin. From that moment, a new **Comments** tab will appear inside the editor, allowing users to review and discuss email designs directly within the interface.

No additional parameters are required in your initialization code — activation is handled automatically by Stripo’s backend.

Whether users can view or interact with comments depends on the permissions you define for them in your application. The editor supports two types of comment-related permissions:

* **manageOwnComments**
  * `read`: Allows the user to open the Comments tab and view comment threads created by them. This permission controls the visibility of the tab: it is shown if either `manageOwnComments.read` or `manageAllComments.read` is enabled, and hidden only when both are disabled.
  * `write`: Allows the user to create new comments and reply to existing threads. Authors can edit, delete, resolve, reopen, and move their own comments when they have read access.
* **manageAllComments**
  * `read` Allows the user to open the Comments tab and view comments created by all users. When this permission is disabled but `manageOwnComments.read` is enabled, the user sees only their own comment threads.
  * `write` Allows the user to edit, delete, resolve, reopen, and move comments created by other users, providing moderation capabilities.

If you haven't configured any comment-related permissions, the editor assumes full access by default. All users will be able to view, create, and manage comments without restrictions.

This ensures that the feature works out of the box for teams that have yet to implement custom access control.

:::success
Refer to the [Permissions and Access Management](/editor-configuration/permissions-and-access-management) section for implementation details.
:::

## Fetching User Information {#fetching-user-information}

Every time a user leaves a comment, the editor automatically stores their basic profile information (such as name, ID, and avatar) inside the email model. This ensures that even if the comment author later becomes unavailable, their name and picture still appear correctly in the discussion.

However, there are cases when user information changes — for example, a teammate updates their display name or profile picture. To make sure these updates are reflected in previously created comments, the editor can dynamically refresh user details when the email is opened.

For that, you can define the `onUsersInfoRequest` function during Plugin initialization.

When the editor opens a template containing comments, it automatically calls this function, passing the list of user IDs found in the comment data.

Your backend should respond with the latest user information so that the editor can update all displayed comments accordingly.

**Function Parameters**

| Parameter | Type | Description |
| :---- | :---- | :---- |
| `userIds` | Array | List of user IDs to fetch information for. |
| `successCallback` | Function | Callback to invoke with the user data array. |
| `errorCallback` | Function | Callback to invoke if an error occurs. |

**User Object Structure**\
Each user object in the response should contain:

| Property | Type | Required | Description |
| :---- | :---- | :---- | :---- |
| `userId` | String | Yes | Unique identifier of the user. |
| `userName` | String | Yes | Display name of the user. |
| `avatar` | String | No | URL to the user's avatar image. |
| `email` | String | No | Email address of the user. |

**Usage Example**

```js
onUsersInfoRequest: function (userIds, successCallback, errorCallback) {
  fetch(`/api/users/info`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ids: userIds })
  }).then(res => res.json())
    .then(data => successCallback(data.users))
    .catch(err => errorCallback(err));
}
```

This callback is called automatically and should return an array of user objects.

If your application supports avatars, display names, or user emails, include those fields in the response so the editor can show the most accurate and up-to-date information next to each comment.

## Mentioning Users

To make communication even more natural, users can mention teammates directly inside comments — just like in chat applications. When typing a comment, the user can enter the **@** symbol and start typing a name.

A dropdown will appear with a list of users matching the text, allowing the commenter to tag the right person and automatically notify them about the discussion.

::: image-wrap
![](/img/plugin/new/image234.webp){width=1286 height=758}
:::

To make this feature work, your Plugin must know how to find and return possible matches from your user base. That’s why the editor can call a special function — `onUsersInfoSearchRequest` — which you define during initialization.

If this function is not defined during initialization, the mention feature is completely disabled: typing the **@** symbol in a comment does not open the user search popup, and no search requests are made.

When a user starts typing a name after "**@**", the editor automatically calls the `onUsersInfoSearchRequest` function, providing search parameters and expecting a list of matching users in response.

**Function Parameters**

| Property | Type | Description |
| :---- | :---- | :---- |
| `params` | Object | Search parameters (see structure below). |
| `successCallback` | Function | Callback to invoke with the search results. |
| `errorCallback` | Function | Callback to invoke if an error occurs. |

**Search Parameters Object**

| Property | Type | Description |
| :---- | :---- | :---- |
| `offset` | Number | Starting position for pagination. |
| `size` | Number | Number of results to return. |
| `asc` | Boolean | Sort order (ascending if true). |
| `sortBy` | String | Field to sort by (optional). |
| `filter` | String | Search query text (optional). |

**Response Object Structure**\
The callback should receive an object containing:

| Property | Type | Description |
| :---- | :---- | :---- |
| `items` | Array | Array of user objects matching the search criteria. |
| `total` | Number | Total count of matching users. |

Each user object in the `items` array should follow the same structure as described in the  [Fetching User Information](#fetching-user-information) section.

**Usage Example**

```js
onUsersInfoSearchRequest: function (params, successCallback, errorCallback) {
  fetch(`/api/users/search?query=${encodeURIComponent(params.filter || '')}`)
  .then(res => res.json())
  .then(data => successCallback(data))
  .catch(err => errorCallback(err));
}
```

Your API should return a JSON object that includes the array of matching users and the total count.

Each user object can contain a name, avatar, and ID — these will be displayed in the mention dropdown to help collaborators quickly tag the right person.

## Notifications API

In collaborative environments, it’s often important to stay updated on what’s happening with email feedback — especially when several people are working on the same design. The **Notifications API** helps with that by letting your system receive automatic alerts whenever something happens in the comments section of the editor.

When this option is activated in your Plugin settings, Stripo will start sending webhook requests to your specified endpoint each time:

* a new comment is added,
* someone replies to an existing discussion,
* a teammate is mentioned in a comment, or
* a comment is resolved.

This allows your system to instantly notify users (for example, via email or internal messaging), update task trackers, or trigger any other workflow that depends on feedback events.

If the Notifications API is not activated, the editor will work normally — comments will still function inside the UI, but no external notifications will be sent.

**How to Enable**

The Notifications API is configured directly in your Stripo **Plugin Settings**, under the **Commenting** section.

Here’s what you’ll need to provide:

1. **Enable the toggle** to activate webhook notifications.
2. Enter your **endpoint URL** — the HTTPS address where notifications should be sent.
3. Specify **login** and **password** for basic authentication, so only Stripo’s backend can access the endpoint.

::: image-wrap
![](/img/plugin/new/image235.webp){width=1172 height=555}
:::

Once this is set up, our backend will automatically start delivering JSON payloads with comment activity to your endpoint in real time.

For details on request structure, field descriptions, and expected response format, refer to the [**Server Webhooks → Comments Notifications**](/editor-configuration/server-webhooks#comments-notifications) section, which includes the full OpenAPI specification for comment-related events.

**Delivery and Reliability**

* Each webhook request must be acknowledged with an HTTP **2xx** response code.
* If no acknowledgment is received, Stripo will retry sending the request up to **5 times within 10 minutes**.
* After the final attempt, undelivered notifications will no longer be resent.
* Only secure **HTTPS** endpoints are supported.