import { useSetDocumentId, useSetLocation } from '@veltdev/react';

export default function YourDocument() {

  useSetDocumentId('some_document_id')

  useSetLocation({
    'id': 'locationId1',
    'locationName': 'Scene1LocationName',
    'page': 'mainPage',
    'version': {
      'id': 'v2.3',
      'name': 'Version Name'
    },
    'videoFrame': '120'
    // You can keep adding more field to make the location very specific.
    // The field names can be anything.
  })

  return (
    <div>
      //your document template
    </div>
    
  );
}
1

Import the useSetDocumentId and useSetLocation hooks

import { useSetDocumentId, useSetLocation } from '@veltdev/react';
2

Set the document ID

useSetDocumentId("my-document-id")
3

Set the Location

A Location can be described using any plain JSON object and can be set using the useSetLocation hook.

This object could represent your app’s pages, sections, versions, video frames, or data points on maps/charts etc.

There are three important fields you should care about in your location object that are protected keywords:

  • id - a unique ID to identify your location. It can be used by other methods to find or remove the location later. This field is required.
  • locationName - a name to describe your location. It is used by other Velt components, such as the VeltCommentsSideBar, to label your location. This field is optional but highly recommended.
  • version - an object that includes an id and name to mark the specific version of your location. This field is optional.
useSetLocation({
  'id': 'locationId1',
  'locationName': 'MainVideoPlayer',
  'page': 'mainPage',
  'version': {
    'id': 'v2.3',
    'name': 'Version Name'
  },
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
})
import { useSetDocumentId, useSetLocation } from '@veltdev/react';

export default function YourDocument() {

  useSetDocumentId('some_document_id')

  useSetLocation({
    'id': 'locationId1',
    'locationName': 'Scene1LocationName',
    'page': 'mainPage',
    'version': {
      'id': 'v2.3',
      'name': 'Version Name'
    },
    'videoFrame': '120'
    // You can keep adding more field to make the location very specific.
    // The field names can be anything.
  })

  return (
    <div>
      //your document template
    </div>
    
  );
}