Add Velt Components in your app
VeltComments
component in the root of your appVeltComments
component to enable the Comment feature in your app.Enable the follow attributes to be true
:priority
: allows user to P0, P1, or P2 as priority. You can customize this list.autoCategorize
: allows AI to categorize comment as Question, Feedback, Bug, Other. You can customize this list.commentIndex
: shows a small icon showing index of the comment in order of creation.VeltCommentTool
component wherever you want your render the comment tool.VeltCommentPlayerTimeline
component as a sibling to your video player.<VeltCommentPlayerTimeline>
component as a sibling to your video player component.It will auto adjust to the same width as your video player.<VeltCommentPlayerTimeline>
component and one sibling video player component per documentID
<VeltCommentPlayerTimeline>
doesnt have CSS position value as ‘static’.<VeltCommentsSidebar>
component.embedMode
prop as true
.<VeltSidebarButton>
component.Set the `totalMediaLength` on the `VeltCommentPlayerTimeline`
totalMediaLength
using props to represent the total number of frames or seconds in the video:Subscribe to when the Comment Tool is activated by the User.
<VeltCommentTool>
to handle onCommentModeChange
events.Use this whenever the user clicks on the comment tool, to pause your player and set a new Location
in the Velt SDK.Setting a Location
in the Velt SDK ensures that the comments are tied to that particular media frame or timestamp.Set Velt Location
VeltCommentPlayerTimeline
component, ensure to set the current rounded frame or second in the special key currentMediaPosition
.currentMediaPosition
is a protected keyword that is used to arrange the comment bubbles on top of the video player timeline in the correct spotWhen the player is played, remove Velt `Location` to remove comments from the media.
removeLocation()
when your player starts playing:Set your player's state when the user clicks on the comment.
onCommentClick
event handler on the VeltCommentsSidebar
& VeltCommentPlayerTimeline
components you added earlier.
The event will give you back the location
object that you had set earlier.You can use this object to update your player state and also update the SDK’s location
so that we can start rendering the comments associated with that location
.VeltCommentsSidebar
:VeltCommentPlayerTimeline
:property | type | description |
---|---|---|
documentId | string | The document ID where the comment was added |
location | object | The location where the comment was added |
targetElementId | string | The DOM ID of the target element on which the comment was added |
context | Object | Any context data passed when the comment was added |