Use Multiple Locations at once

Get Started

Key Concepts

Overview
Organizations
Documents
Locations
Users
Access Control

Async Collaboration

Comments
In-app Notifications
Inline Reactions
Recorder
View Analytics
Arrows

Realtime Collaboration

Presence
Cursors
Follow Me Mode
Huddle
Live Selection
Live State Sync
Single Editor Mode
Video Player Sync

Self-Host Data

Email Notifications

Overview

Webhooks

Security

Miscellaneous

Migrate From Cord
Common Integration Questions

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

export default function YourDocument() {


  //Set Document ID
  useSetDocument('some_document_id');

  //Set Root Location
  useSetLocation({
      '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
  useSetLocation({
      '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)


  return (
    <div>
      <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>
    </div>
    
  );
}

There are three main steps to adding multiple locations:

Add a root location
Add additional locations
Bind elements containers to locations

Add a root location

useSetDocument('some_document_id');

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

useSetDocument('some_document_id');

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

client.setDocument('some_document_id');

client.setLocation({ 
  'id': 'locationRoot',
  'locationName': 'PageWithVideo',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
});

Velt.setDocument('some_document_id');

Velt.setLocation({ 
  'id': 'locationRoot',
  'locationName': 'PageWithVideo',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
});

this.client.setDocument('some_document_id');

this.client.setLocation({ 
  'id': 'locationRoot',
  'locationName': 'PageWithVideo',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
})

client.setDocument('some_document_id');

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

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)

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)

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

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

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

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

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

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

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

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

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

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

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

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

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>

<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>

<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>

<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>

<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>

<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>

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

export default function YourDocument() {


  //Set Document ID
  useSetDocument('some_document_id');

  //Set Root Location
  useSetLocation({
      '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
  useSetLocation({
      '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)


  return (
    <div>
      <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>
    </div>
    
  );
}

Was this page helpful?

Setup Remove Locations

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

export default function YourDocument() {


  //Set Document ID
  useSetDocument('some_document_id');

  //Set Root Location
  useSetLocation({
      '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
  useSetLocation({
      '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)


  return (
    <div>
      <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>
    </div>
    
  );
}