Skip to main content
// 1) Create a component that will represent your document 

//Warning: Make sure this is a child component to VeltProvider 
//and not within the same file where VeltProvider is placed.

// 2) Import the useSetDocument hook
import { useSetDocument } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocument('unique-document-id', {documentName: 'Document Name'});

  return (
    <div>
      //your document template - add Velt Components here
    </div>
    
  );
}
A Document represents a shared collaborative space where users can interact. Documents live inside the Organization. Learn more about documents here. The Set Document method takes two parameters:
  • documentId: The unique identifier for the document.
  • metadata: (optional) This is a key/value pair object where you can set metadata about the document such as documentName. documentName is a special field that we use to display the document name in some Velt Components.
The SDK will not work without this call.

​
1. Initialize Document for the current Organization

  • By default, users can only access documents within their own organization. Use this to set the document for the current organization the user is logged into.
  • React / Next.js with Hooks
  • React / Next.js
  • HTML
  • Angular
  • Vue.js
It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.
Realistically, these steps should be done inside your component that represents your document.
import { useSetDocument } from '@veltdev/react';
useSetDocument('unique-document-id', {documentName: 'Document Name'});

​
2. Initialize Document for a different Organization

  • Use this to access a document from an organization different than the one the user is logged into.
  • You can enable cross-organization access by specifying the organizationId of the target document in the document metadata.
  • Ensure that the user has access to the target document in the target organization.
  • React / Next.js with Hooks
  • React / Next.js
  • HTML
  • Angular
  • Vue.js
It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.
Realistically, these steps should be done inside your component that represents your document.
import { useSetDocument } from '@veltdev/react';
useSetDocument('unique-document-id', {organizationId: 'ANOTHER_ORGANIZATION_ID'});

// 1) Create a component that will represent your document 

//Warning: Make sure this is a child component to VeltProvider 
//and not within the same file where VeltProvider is placed.

// 2) Import the useSetDocument hook
import { useSetDocument } from '@veltdev/react';

export default function YourDocument() {

  // 3) Set a document ID
  useSetDocument('unique-document-id', {documentName: 'Document Name'});

  return (
    <div>
      //your document template - add Velt Components here
    </div>
    
  );
}
⌘I