There are three main steps to adding multiple locations:

  1. Add a root location
  2. Add additional locations
  3. Bind elements containers to locations
1

Add a root location

useSetDocument('some_document_id');

useSetLocation({ 
  'id': 'locationRoot',
  'locationName': 'PageWithVideo',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
})
2

Add additional locations

Add additional locations on the page by using set location with the true parameter:

useSetLocation({ 
  'id': 'locationId1',
  'locationName': 'Scene1LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'videoFrame': '120'
}, true)

useSetLocation({
  'id': 'locationId2',
  'locationName': 'Scene2LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'videoFrame': '50'
}, true)

useSetLocation({
  'id': 'locationId3',
  'locationName': 'Scene3LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'videoFrame': '80'
}, true)
3

Bind element containers to locations

  • When you render multiple elements representing different locations on the same page, then you can bind each element container to the correct location by adding the data-velt-location-id attribute.

  • This ensures that the comment added within the location is associated with the correct location.

<div class="page">
  <div id="location1-id" data-velt-location-id="location1-id">
    <div class="card">
      // any content
    </div>
  </div>
  <div id="location2-id" data-velt-location-id="location2-id">
    <div class="card">
      // any content
    </div>
  </div>
</div>

Was this page helpful?

Set LocationRemove Locations