Make sure you turn React strict mode off.
1

Add Velt Components in your app

a. Add the VeltComments component in the root of your app

Add the VeltComments 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.
<VeltComments priority={true} autoCategorize={true} commentIndex={true}/>

b. Add the VeltCommentTool component wherever you want your render the comment tool.

Note you can also provide your own button to this component.

<VeltCommentTool>
  <button slot="button">
    {/* your custom button (optional) */}
  </button>
</VeltCommentTool>

c. Place the VeltCommentPlayerTimeline component as a sibling to your video player.

To show comment bubbles on your player seek bar, add the <VeltCommentPlayerTimeline> component as a sibling to your video player component.

It will auto adjust to the same width as your video player.

<div>
  <YourVideoPlayer/>
  <VeltCommentPlayerTimeline/>
</div>

Right now we assume you have a maximum of one <VeltCommentPlayerTimeline> component and one sibling video player component per documentID

Ensure that the parent container of <VeltCommentPlayerTimeline> doesnt have CSS position value as ‘static’.

d. Add the <VeltCommentsSidebar> component.

(Optional) To embed the sidebar in your existing component, set embedMode prop as true.

<VeltCommentsSidebar embedMode={true}/>

e. Add the <VeltSidebarButton> component.

This will open or close the Comment Sidebar. Note you can also provide your own button to this component.

<VeltSidebarButton>
  <div className='sidebar-custom-btn'>
    {/* your custom button (optional) */}
  </div>
</VeltSidebarButton>
2

Set the `totalMediaLength` on the `VeltCommentPlayerTimeline`

You can pass an integer to totalMediaLength using props to represent the total number of frames or seconds in the video:

<VeltCommentPlayerTimeline totalMediaLength={120} />

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.

const commentElement = client.getCommentElement();
commentElement.setTotalMediaLength(120);
3

Subscribe to when the Comment Tool is activated by the User.

Add an event handler on where you originally placed <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.


<VeltCommentTool onCommentModeChange={(mode) => onCommentModeChange(mode)} />

const onCommentModeChange = (mode) => {
    // mode will be `true` if the user has activated the comment tool
    // If the comment tool is active, pause the player and set the "location".
    if (mode) {
        // pause player
        // See step 8 below for details 
        setLocation()
    }
});
4

Set Velt Location

You can pass in a key value pair object that represents the current state of your player. If you are using the 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 spot
const setLocation = (client) => {
    
    // set currentMediaPosition property on a Location object to represent the current frame
    let location = {
      currentMediaPosition : 120
    }
    //set the Location using the client
    client.setLocation(location)
    
}
5

When the player is played, remove Velt `Location` to remove comments from the media.

Call removeLocation() when your player starts playing:

const removeLocation = () => {
    //remove the location, so the video player can play without comments appearing in frames
    client.removeLocation()
}
6

Set your player's state when the user clicks on the comment.

Add the 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.

a. Handle it on the VeltCommentsSidebar:

<VeltCommentsSidebar embedMode={true} onCommentClick={(event) => onCommentClick(event)} />

const onCommentClick = (event) => {
    if (event) {
      // Get the location object from the event.
      const { location } = event;
      if (location) {
          // Get the media position where the comment was added.
          const { currentMediaPosition } = location;
          if (currentMediaPosition) {
              // Pause the player.

              // Seek to the given comment media position.

              // Set the Velt Location to the clicked comment location.
              client.setLocation(location);
          }
      }
  }
}

b. Handle it on the VeltCommentPlayerTimeline:

<VeltCommentPlayerTimeline onCommentClick={(event) => onTimelineCommentClick(event)} />

const onTimelineCommentClick = (event) => {
  if (event) {
      // Get the location object from the event.
      const { location } = event;
      if (location) {
          // Get the media position where the comment was added.
          const { currentMediaPosition } = location;
          if (currentMediaPosition) {
              // Pause the player.

              // Seek to the given comment media position.

              // Set the Velt Location to the clicked comment location.
              client.setLocation(location);
          }
      }
  }
}

The clicked Comment data will be in the following format:

propertytypedescription
documentIdstringThe document ID where the comment was added
locationobjectThe location where the comment was added
targetElementIdstringThe DOM ID of the target element on which the comment was added
contextObjectAny context data passed when the comment was added

Additional Configurations

Allow comments only on certain elements

Provide a list of element DOM IDs where commenting should be allowed. Comments will be disabled for all other elements.

const commentElement = client.getCommentElement();
commentElement.allowedElementIds(['lottiePlayerContainer']);

Was this page helpful?

Inline Comments SetupPrebuilt Video Player Setup