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',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '120'
            // You can keep adding more field to make the location very specific.
            // The field names can be anything.
        })

        //Add another Location
        client.setLocation({
            'id': 'locationId2',
            'locationName': 'Scene2LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '240'
            // You can keep adding more field to make the location very specific.
            // The field names can be anything.
        },true)
    }
  }, [client]);

  return (
    <div>
      <div class="page">
        <div id="location1-container-id" data-velt-location={JSON.stringify({
            'id': 'locationId1',
            'locationName': 'Scene1LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '120'
        })}>
          <div class="card">
            // any content
          </div>
        </div>
        <div id="location2-container-id" data-velt-location={JSON.stringify({
            'id': 'locationId2',
            'locationName': 'Scene2LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '240'
        })}>
          <div class="card">
            // any content
          </div>
        </div>
      </div>
    </div>
    
  );
}
  • React / Next.js

  • HTML

Add multiple Locations

There are two main steps to adding multiple locations that are both required:

  1. Add additional locations with setLocation().
  2. Bind location container elements on the page to locations using location data attribute.
1

Add additional locations with setLocation()

To add multiple locations that are meant to be active at the same time, use the client.setLocation() method and pass in true as the second parameter.

client.setDocumentId('some_document_id');

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

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

client.setLocation({
  'id': 'locationId3',
  'locationName': 'Scene3LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'page': 'scene3',
  'videoFrame': '80'
}, true)
2

Bind location container elements to location object

Location data attributes are mandatory if you are using multiple locations.

If you have elements representing multiple locations displayed on the same page, then you can bind them to a location using the data-velt-location attribute.

You should stringify and pass the location object as value to the data attribute.

Be sure to Stringify the location object before passing it to the data attribute. Also be sure to add a unique id to each of the containers for extra robustness.

let dataAttributeObject1 = {
  key1: "value1"
}

let dataAttributeObject2 = {
  key2: "value2"
}


<div class="page">
  <div id="location1-container-id" data-velt-location={JSON.stringify(dataAttributeObject1)}>
    <div class="card">
      // any content
    </div>
  </div>
  <div id="location2-container-id" data-velt-location={JSON.stringify(dataAttributeObject2)}>
    <div class="card">
      // any content
    </div>
  </div>
</div>