import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';

export default function YourDocument() {

  const { client } = useVeltClient();

  useEffect(() => {
    
    if (client) {
        //Set Document ID
        client.setDocumentId('some_document_id');

        //Set Location
        client.setLocation({
            '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.
        })


    }
  }, [client]);

  return (
    <div>
      //your document template
    </div>
    
  );
}
  • React / Next.js

  • HTML

1

Import the Velt Client

import { useVeltClient } from '@veltdev/react';
const { client } = useVeltClient();
2

Set the document ID

useEffect(() => {
  if (client) {
    client.setDocumentId('my-unique-document-id')
  }
}, [client]);
3

Set the Location

A Location can be described using any plain JSON object and can be set using the client.setLocation() method.

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.
client.setLocation({
  '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.
})