
1
Set up Velt Components in your app
You will be using the following components:Add the
Add the Add the
Note you can also provide your own button to this component.Add the
Place the
Add
Add the
(Optional) To embed the sidebar in your existing component, set Add the
This will open or close the Comment Sidebar.
Velt Comments
: Renders comments on the DOM.Velt Comment Tool
: Enables or disables adding comments.Velt Reaction Tool
: Enables or disables adding reactions.Velt Comment Player Timeline
: Adds comments bubble over your player seek bar.Velt Comments Sidebar
: Adds a sidebar that shows all comments. Users can also search, filter & navigate to the comments from here.Velt Sidebar Button
: Toggles the sidebar on/off.
Add the Velt Comments
component in the root of your app
Add the Velt Comments
component to the root of your app.- React / Next.js
- Other Frameworks
Add the Velt Comment Tool
component wherever you want your render the comment tool.
Note you can also provide your own button to this component.- React / Next.js
- Other Frameworks
Add the Velt Reaction Tool
component wherever you want your render the reaction tool.
- Provide the video player ID on which you want the reactions to be added.
- Add an event handler to handle
onReactionToolClick
events.
- React / Next.js
- Other Frameworks
Place the Velt Comment Player Timeline
component as a sibling to your video player.
- To show comment bubbles on your player seek bar, add the
Velt Comment Player Timeline
component as a sibling to your video player component. - It will auto adjust to the same width as your video player.
Right now we assume you have a maximum of one
velt comment player timeline
component and one sibling video player component per documentID
Ensure that the parent container of
velt comment player timeline
doesnt have CSS position value as ‘static’.videoPlayerId
is optional and helps support multiple players/timelines on the same page.- If omitted, the timeline shows all comments for the current document (for the active version).
- If provided, the timeline shows only comments whose
location.videoPlayerId
matches the givenvideoPlayerId
.
location.videoPlayerId
so the timeline can correctly associate comments with the player.- React / Next.js
- Other Frameworks
Add id
to the video player or its parent element.
- If you don’t have access to the raw
<video>
player, you can add anid
to the parent element of the video player.
- React / Next.js
- Other Frameworks
Add the Velt Comments Sidebar
component.
(Optional) To embed the sidebar in your existing component, set embedMode
prop as true
.- React / Next.js
- Other Frameworks
Add the Velt Sidebar Button
component.
This will open or close the Comment Sidebar.- React / Next.js
- Other Frameworks
2
Set the `total media length` on the `Velt Comment Player Timeline`
You can pass an integer to Alternatively, you can set this using API method call.
This is useful if you first need to grab the total frames from another method before setting it.
total media length
using props to represent the total number of frames or seconds in the video:- React / Next.js
- Other Frameworks
- React / Next.js
- Other Frameworks
3
Detect Comment Tool Activation and Set Media Location
- Detect when the user activates the comment tool by adding an event handler to the
onCommentModeChange
event. - Pause your player and set a new
Location
in the Velt SDK. - This ensures that the comments are tied to that particular media frame or timestamp.
- You can pass in a key value pair object that represents the current state of your player.
Velt Comment Player Timeline
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 spot- React / Next.js
- Other Frameworks
4
Detect Reaction Tool Activation and Set Media Location
- Detect when the user activates the reaction tool by adding an event handler to the
onReactionToolClick
event. - Pause your player and set a new
Location
in the Velt SDK. - This ensures that the reactions are tied to that particular media frame or timestamp.
- You can pass in a key value pair object that represents the current state of your player.
If you are using the
Velt Comment Player Timeline
component, ensure to set the current rounded frame or second in the special keycurrentMediaPosition
.currentMediaPosition
is a protected keyword that is used to arrange the comment bubbles on top of the video player timeline in the correct spot
- React / Next.js
- Other Frameworks
5
When the player is played, remove Velt `Location` to remove comments from the media.
Call
removeLocation()
when your player starts playing:- React / Next.js
- Other Frameworks
6
Navigate to the comment's location in the player from the Sidebar or Timeline.
Add the Handle click on the
Handle click on the
The clicked Comment data will be in the following format:
onCommentClick
event handler on the Velt Comments Sidebar
& Velt Comment Player Timeline
components you added earlier.
The event will give you back the location
object that you had set on the comment.Use this object to:- update your player state
- update the SDK’s
location
so the comments associated with thatlocation
are rendered.
Handle click on the Velt Comments Sidebar
:
- React / Next.js
- Other Frameworks
Handle click on the Velt Comment Player Timeline
:
- React / Next.js
- Other Frameworks
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 |