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({
            'page': 'mainPage',
            'version': 'v1.2',
            '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

Advanced Set Up options

This section includes a list of optional advanced set up options.

Location

Users logged into the same Document ID can see each other’s Presence, Cursors, Comments etc.

However, if you want to add another layer of categorization to organize users together, you can use Location.

For an example, for a Collaborative Slide Presentation application, the Document would represent the entire slide presentation while the Location would represent an individual slide.

As another example, for a Collaborative Video Editor, the Document would represent the entire video player while the Location would represent the timestamp of the video.

If a Document is like a house, a Location is like a room within the house.

Locations are completely optional, you can opt to use them or not. If the complexity of your application does not require the use of Locations, you can use Documents by themselves to group your users together.

If you opt to use Locations, users in the same Document must also be in the same Location now to interact.

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

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

client.setLocation({
  'page': 'mainPage',
  'version': 'v1.2',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
})

If you specify a Location, users in the same Document will no longer be able to interact if they are not also in the same Location.

To use a Location together with a Document, simply call the setDocumentID() method before the setLocation() method.

client.setDocumentID('some_document_id');
client.setLocation({
  'page': 'mainPage',
  'version': 'v1.2',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
})

To remove a Location that has already been set, you can use the client.removeLocation() method:

client.removeLocation()

Was this page helpful?

3. Initialize DocumentOverview