---
title: "Configuring the Comments plugin in embedded mode"
description: "Information on configuring the Comments plugin in embedded mode"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/comments-embedded-mode/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/comments-embedded-mode/index.md"
version: "6"
last_updated: "2022-11-30T01:26:11Z"
tokens: 2118
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/comments-embedded-mode/).
# Configuring the Comments plugin in embedded mode

## Add the Comments plugin in embedded mode

To add the Comments plugin in embedded mode to the TinyMCE, configure the following options:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_author: 'author',
  tinycomments_author_name: 'Name of the commenter',
  tinycomments_mode: 'embedded'
});
```
This is the minimum recommended setup for the Comments plugin in embedded mode. If the `tinycomments_author` and `tinycomments_author_name` options are not configured, all users will be assigned the name " *ANON* ".

## Interactive example

**Example**

```js
const currentAuthor = 'A Tiny User';
const userAllowedToResolve = 'Admin1';

tinymce.init({
  selector: 'textarea#comments-embedded',
  plugins: 'code tinycomments',
  toolbar: 'bold italic underline | addcomment showcomments',
  menubar: 'file edit view insert format tools tc',
  menu: {
    tc: {
      title: 'Comments',
      items: 'addcomment showcomments deleteallconversations'
    }
  },
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: (req, done, fail) => {
    const allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
    done({
      canResolve: allowed || currentAuthor === userAllowedToResolve
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
  /* The following setup callback opens the comments sidebar when the editor loads */
  setup: (editor) => {
    editor.on('SkinLoaded', () => {
      editor.execCommand('ToggleSidebar', false, 'showcomments', { skip_focus: true });
    });
  }
});
```

## Options

### `tinycomments_author`

This option sets the author id to be used when creating or replying to comments.

**Type:** `String`

**Default value:** `'Anon'`

#### Example: using `tinycomments_author`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
});
```

### `tinycomments_author_avatar`

> **Note:** This feature is only available for TinyMCE 6.1 and later.
*Optional* - This option sets the URL for the author’s avatar to be used when creating or replying to comments. If this option is omitted, a generated avatar will be used instead. The avatar, if provided:

- will be scaled to a 36px diameter circle; and
- can be any filetype able to be wrapped in an `<img>` element.

> **Important:** The avatar will be stored alongside the embedded comment data when a new comment is created and cannot be changed later by changing this options value. To change the avatar image, the image on the server that the URL points to should be updated instead.
**Type:** `String`

#### Example: using `tinycomments_author_avatar`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
  tinycomments_author_avatar: 'https://example.com/image.ext'
});
```

### `tinycomments_author_name`

*Optional* - This option sets the author’s display name to be used when creating or replying to comments. If this option is omitted, then the author id is used instead.

**Type:** `String`

#### Example: using `tinycomments_author_name`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: 'embedded_journalist',
  tinycomments_author_name: 'Embedded Journalist',
});
```

### `tinycomments_can_delete`

*Optional* - This option sets the author permissions for *deleting comment conversations*. If the `tinycomments_can_delete` option is not included, the current author (`tinycomments_author`) cannot delete comment conversations created by other authors.

**Type:** `Function`

**Default value:**

```js
(req, done, fail) => {
  const allowed = req.comments.length > 0 &&
                req.comments[0].author === <Current_tinycomments_author>;
  done({
    canDelete: allowed
  });
}
```
The following example extends the default behavior to allow the author `<Admin user>` to delete other author’s comment conversations by adding `|| currentAuthor === '<Admin user>'`.

#### Example: using `tinycomments_can_delete`

```js
const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_delete: (req, done, fail) => {
    const allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
  }
});
```

### `tinycomments_can_resolve`

*Optional* - This option adds a *Resolve Conversation* item to the dropdown menu of the first comment in a conversation. This callback sets the author permissions for *resolving comment conversations*.

**Type:** `Function`

#### Example: using `tinycomments_can_resolve`

```js
const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: (req, done, fail) => {
    const allowed = req.comments.length > 0 &&
                  req.comments[0].author === currentAuthor;
    done({
      canResolve: allowed || currentAuthor === '<Admin user>'
    });
  }
});
```

### `tinycomments_can_delete_comment`

*Optional* - This option sets the author permissions for *deleting comments*. If the `tinycomments_can_delete_comment` option is not included, the current author (`tinycomments_author`) cannot delete comments added by other authors.

**Type:** `Function`

**Default value:**

```js
(req, done, fail) => {
  const allowed = req.comment.author === <Current_tinycomments_author>;
  done({
    canDelete: allowed
  });
}
```
The following example extends the default behavior to allow the author `<Admin user>` to delete other author’s comments by adding `|| currentAuthor === '<Admin user>'`.

#### Example: using `tinycomments_can_delete_comment`

```js
const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_delete_comment: (req, done, fail) => {
    const allowed = req.comment.author === currentAuthor;
    done({
      canDelete: allowed || currentAuthor === '<Admin user>'
    });
  }
});
```

### `tinycomments_can_edit_comment`

*Optional* - This option sets the author permissions for *editing comments*. If the `tinycomments_can_edit_comment` option is not included, the current author (`tinycomments_author`) cannot edit comments added by other authors.

**Type:** `Function`

**Default value:**

```js
(req, done, fail) => {
  const allowed = req.comment.author === <Current_tinycomments_author>;
  done({
    canEdit: allowed
  });
}
```
The following example extends the default behavior to allow the author `<Admin user>` to edit other author’s comments by adding `|| currentAuthor === '<Admin user>'`.

#### Example: using `tinycomments_can_edit_comment`

```js
const currentAuthor = 'embedded_journalist';

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_edit_comment: (req, done, fail) => {
    const allowed = req.comment.author === currentAuthor;
    done({
      canEdit: allowed || currentAuthor === '<Admin user>'
    });
  }
});
```

## Show the comments sidebar when TinyMCE loads

The [`sidebar_show`](../customsidebar/#sidebar_show) option can be used to show the comments sidebar when the editor is loaded.

For example:

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'tinycomments',
  tinycomments_mode: 'embedded',
  tinycomments_author: currentAuthor,
  tinycomments_can_resolve: canResolveCommentsCallback,
  sidebar_show: 'showcomments'
});
```

## Configuring the commented text and block CSS properties

The highlight styles are now a part of the overall content skin and are changed through customizing the skin.

TinyMCE open source project [oxide](https://github.com/tinymce/oxide/blob/master/src/less/theme/content/comments/comments.less) (default skin), defines the variables used for changing the annotation colours.

Refer to the [documentation](../creating-a-skin/) for building a skin using this repo.

For more information on configuring TinyMCE formats, refer to the [formats](../content-formatting/#formats) section.