Concepts
Async Collaboration
- Comments
- Comment Dialog
- Comments Sidebar
- Standalone Components (DIY)
- Inline Comments Section
- Comment Pin
- Comment Tool
- Comment Bubble
- Comment Player Timeline
- Confirmation Dialog
- MultiThread Comment Dialog
- Persistent Comment Mode Banner
- Text Comment Tool
- Text Comment Toolbar
- Velt Video Player
- In-app Notifications
- Recorder
- Inline Reactions Section
- Arrows
Realtime Collaboration
- Presence
- Single Editor Mode
- Live Selection
- Cursors
- Huddle
Comment Dialog
Overview
The interface that appears when you try to read an existing Comment or make a new Comment.
Copy
Ask AI
<VeltWireframe>
<VeltCommentDialogWireframe>
{/* Ghost Banner - Only shown for ghost comments */}
<VeltCommentDialogWireframe.GhostBanner />
{/* Private Banner - Only shown for private comments */}
<VeltCommentDialogWireframe.PrivateBanner />
{/* Assignee Banner - Only shown for assigned comments */}
<VeltCommentDialogWireframe.AssigneeBanner />
{/* Header */}
<VeltCommentDialogWireframe.Header />
{/* Body */}
<VeltCommentDialogWireframe.Body />
{/* Composer */}
<VeltCommentDialogWireframe.Composer />
{/* All Comments */}
<VeltCommentDialogWireframe.AllComment />
{/* Approve - Only when moderator mode is on */}
<VeltCommentDialogWireframe.Approve />
{/* Sign In - Only when user is anonymous and sign in button is enabled */}
<VeltCommentDialogWireframe.SignIn />
{/* Upgrade - Not visible by default */}
<VeltCommentDialogWireframe.Upgrade />
{/* Suggestion Action - Only when suggestion mode is on */}
<VeltCommentDialogWireframe.SuggestionAction />
</VeltCommentDialogWireframe>
</VeltWireframe>
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
Default Component
Here’s how the default comment dialog component looks like:
Copy
Ask AI
<VeltWireframe>
<VeltCommentDialogWireframe>
{/* Ghost Banner - Only shown for ghost comments */}
<VeltCommentDialogWireframe.GhostBanner />
{/* Private Banner - Only shown for private comments */}
<VeltCommentDialogWireframe.PrivateBanner />
{/* Assignee Banner - Only shown for assigned comments */}
<VeltCommentDialogWireframe.AssigneeBanner />
{/* Header */}
<VeltCommentDialogWireframe.Header />
{/* Body */}
<VeltCommentDialogWireframe.Body />
{/* Composer */}
<VeltCommentDialogWireframe.Composer />
{/* All Comments */}
<VeltCommentDialogWireframe.AllComment />
{/* Approve - Only when moderator mode is on */}
<VeltCommentDialogWireframe.Approve />
{/* Sign In - Only when user is anonymous and sign in button is enabled */}
<VeltCommentDialogWireframe.SignIn />
{/* Upgrade - Not visible by default */}
<VeltCommentDialogWireframe.Upgrade />
{/* Suggestion Action - Only when suggestion mode is on */}
<VeltCommentDialogWireframe.SuggestionAction />
</VeltCommentDialogWireframe>
</VeltWireframe>
Was this page helpful?
Copy
Ask AI
<VeltWireframe>
<VeltCommentDialogWireframe>
{/* Ghost Banner - Only shown for ghost comments */}
<VeltCommentDialogWireframe.GhostBanner />
{/* Private Banner - Only shown for private comments */}
<VeltCommentDialogWireframe.PrivateBanner />
{/* Assignee Banner - Only shown for assigned comments */}
<VeltCommentDialogWireframe.AssigneeBanner />
{/* Header */}
<VeltCommentDialogWireframe.Header />
{/* Body */}
<VeltCommentDialogWireframe.Body />
{/* Composer */}
<VeltCommentDialogWireframe.Composer />
{/* All Comments */}
<VeltCommentDialogWireframe.AllComment />
{/* Approve - Only when moderator mode is on */}
<VeltCommentDialogWireframe.Approve />
{/* Sign In - Only when user is anonymous and sign in button is enabled */}
<VeltCommentDialogWireframe.SignIn />
{/* Upgrade - Not visible by default */}
<VeltCommentDialogWireframe.Upgrade />
{/* Suggestion Action - Only when suggestion mode is on */}
<VeltCommentDialogWireframe.SuggestionAction />
</VeltCommentDialogWireframe>
</VeltWireframe>
Assistant
Responses are generated using AI and may contain mistakes.