> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bosscart.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Comment Area

> The Comments Widget allows you to effortlessly add a discussion section to any page, blog, funnel step, and more, enabling members to comment and react to specific elements of...

The **Comments Widget** allows you to effortlessly add a discussion section to any **page, blog, funnel step**, and more, enabling members to **comment and react** to specific elements of your website project.

With this widget, members can:

* **Share thoughts and feedback** directly on pages.
* **Engage with content** through comments, likes, and reactions.
* **Foster discussions** by creating interactive conversations within your community.

Below is a quick overview of how the **Comments Widget** appears on a standard website page, demonstrating its intuitive and user-friendly layout.

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/c3d8fceec3452601.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=ba322e31b51bc72d38b750ae9d578572" alt="" width="1719" height="745" data-path="images/builder/c3d8fceec3452601.png" />

### **Naming Your Comment Widget**

The first step in setting up your **Comment Widget** is assigning it a name. You can create as many **comment widgets** as needed, and each one can be given a unique **name**, allowing you to:

* Use the same **comment widget** across multiple pages while maintaining consistency.
* Easily **identify and manage** different widgets within your setup.
* Customize how **comments** are structured for various sections of your website.

Start by **giving your Comment Widget a name**, ensuring it's easily recognizable and aligned with its purpose.

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/ca53a9132e4cdb6a.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=32ad1024ae50179715c0cf65c22b8dab" alt="" width="770" height="381" data-path="images/builder/ca53a9132e4cdb6a.png" />

<Note>
  When you click the **Enter name** box, it will display any other comment widgets you have already created.
</Note>

### Who Can Comment

You can add comment permissions simply by selecting one of the options:

* **All Members**: Logged in members
* Only Admins
* Admins and Moderators

Read more about assigning community roles below

[Assign Community Roles](/builder/community-lms/create-a-community/assign-community-roles)

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/bd8a13d5fcd1e0ee.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=06b1a83a211228f7b51c8436ff95f2e2" alt="" width="672" height="381" data-path="images/builder/bd8a13d5fcd1e0ee.png" />

### Comment Approval

You have full control over comment approvals, allowing you to **turn approval on or off** as needed.

* **When approval is required**, comments will be held for review.
* You can **approve them in the moderation area**, ensuring only appropriate content is published.
* **Once approved, the comment will be published**, becoming visible to all users.

This feature helps maintain a well-moderated community while ensuring high-quality engagement.

<img src="https://mintcdn.com/alavon365/QV57KeevJvB6qbiC/images/builder/67d200d897f5ea0a.png?fit=max&auto=format&n=QV57KeevJvB6qbiC&q=85&s=d7029cba2dd6659cd0b4d01a00d4f134" alt="" width="854" height="230" data-path="images/builder/67d200d897f5ea0a.png" />

### Approve Comments

To review and approve comments before they’re published, follow these steps:

1. **Navigate to the Community tab** and select **Moderation**.
2. Within the moderation section, click **Awaiting Approval**.
3. Here, you will see all comments that are **awaiting approval or deletion**.
4. Approve the comment to publish it, or choose to delete it if necessary.

This process ensures you maintain control over conversations, keeping discussions relevant and well-moderated.

[Community Moderation](/builder/community-lms/create-a-community/community-moderation)

<img src="https://mintcdn.com/alavon365/QV57KeevJvB6qbiC/images/builder/8039321950f97c8c.png?fit=max&auto=format&n=QV57KeevJvB6qbiC&q=85&s=4bd1c2f9ee38536e583e5260815da868" alt="" width="1489" height="415" data-path="images/builder/8039321950f97c8c.png" />

### Allow Images

A simple yet powerful setting allows you to **toggle image commenting on or off** for members.

* **If enabled**, members can attach images to their comments, enriching discussions with visuals.
* **If disabled**, commenting is limited to text-only responses, keeping the conversation streamlined.

This gives you full control over how members interact, ensuring the comment section aligns with your community’s needs.

### Allow Mentions

When **mentions** are enabled, members can tag others using the **@ symbol** followed by their **name**, making interactions more direct and engaging.

* **Tagging a member** ensures they receive a **notification**, helping draw attention to specific comments or discussions.
* **Enhances engagement**, allowing members to interact more efficiently within posts, replies, and discussions.
* **Supports community connection**, encouraging members to participate in ongoing conversations.
* **Automated system email notification** – The mentioned user will receive a **notification email** after **20 minutes**, ensuring they are informed about the interaction.

This feature streamlines communication and makes interactions within your Circle more dynamic.

<img src="https://mintcdn.com/alavon365/QV57KeevJvB6qbiC/images/builder/736e2799525614c1.png?fit=max&auto=format&n=QV57KeevJvB6qbiC&q=85&s=6a3af1471da455101760983d354acbac" alt="" width="926" height="292" data-path="images/builder/736e2799525614c1.png" />

To mention a member in a comment:

1. **Start typing your comment** in the designated comment field.
2. **Use the @ symbol** and begin typing the member's name.
3. **Select the member from the dropdown list** that appears.

<img src="https://mintcdn.com/alavon365/a4e0aobXvzetCcVN/images/builder/ead0b6b466ab1575.png?fit=max&auto=format&n=a4e0aobXvzetCcVN&q=85&s=f33c60cfc2eed9f1677962f934981879" alt="" width="860" height="221" data-path="images/builder/ead0b6b466ab1575.png" />

### Comment Order

You can control the order in which comments are displayed within your community, ensuring the conversation flows in a way that best suits your setup.

* **Ascending Order** – Displays the **oldest comments first**, maintaining a structured timeline from earliest to latest.
* **Descending Order** – Shows the **newest comments first**, keeping the most recent discussions at the top for immediate visibility.

Adjusting this setting allows you to **prioritize engagement**, whether you want to highlight fresh interactions or maintain chronological readability.

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/b572f329666b49ad.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=9a26d2e77db9942e1d6dc646603abd8c" alt="" width="492" height="198" data-path="images/builder/b572f329666b49ad.png" />

Below is an illustration when the comment order is set to **Descending**:

<Tip>
  You'll notice that the **initial comment box** is positioned at the **top of the feed**, making it easy for members to quickly start a discussion or share their thoughts.

  * This layout ensures a **smooth user experience**, encouraging engagement right away.
  * Members can **type their comment** and interact with others without needing to scroll extensively.
  * The placement helps keep conversations **organized and accessible** for anyone joining the discussion.
</Tip>

<img src="https://mintcdn.com/alavon365/jdtI0XQKlmiI8Ux4/images/builder/00f7cc8b2467fd2b.png?fit=max&auto=format&n=jdtI0XQKlmiI8Ux4&q=85&s=2ff1d21d6485cf96943657376fd47ec8" alt="" width="1046" height="558" data-path="images/builder/00f7cc8b2467fd2b.png" /><p>Comment Order - Descending</p>

### Initial Number of Comments to Display

This straightforward setting allows you to **control how many comments** are visible by default before members need to load more.

* Choose to display **3, 5, 10, or even 20** comments initially.
* Ensures a **clean and organized** comment section layout.

This feature keeps engagement flexible while allowing for a streamlined experience.

### Use Dark Theme

Enabling the **dark theme** for comments allows you to maintain a consistent brand aesthetic by switching from a **lighter theme** to a **darker** one.

* This option ensures **visual harmony** with your existing background color.
* Helps **enhance readability** while aligning with your design preferences.
* Allows for a **seamless user experience**, making comments feel integrated with your overall layout.

Selecting the right theme depends on your **regular background color**, ensuring the comments section complements your site’s design.
