import { VeltProvider, VeltComments, VeltPresence } from '@veltdev/react';
import YourAuthComponent from './YourAuthComponent';
import YourDocument from './YourDocument';

export default function App() {

  return (
    <VeltProvider apiKey="YOUR_API_KEY">
      <VeltComments/>
      <VeltPresence/>
      <YourAuthComponent/>
      <YourDocument/>
    </VeltProvider>
  );
}
1

Create a React app

Create a new React app using any method you prefer.

2

Install the Velt React package onto your app

Terminal
cd my-app && npm install @veltdev/react
3

Install types (optional)

If you’re using TypeScript, you can install the types package.

Terminal
npm install --save-dev @veltdev/types
4

Grab your Velt API Key

Go to console.velt.dev and grab your Velt API Key

5

Safelist your domain

In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

6

Configure the VeltProvider

In App.js, add the VeltProvider component to the root of your app with your Velt API Key.

App.js
<VeltProvider apiKey="YOUR_API_KEY">
  <YourAuthComponent/>
  <YourDocument/>
</VeltProvider>
7

Identify your user

In YourAuthComponent.js, use the useIdentify() hook from the Velt SDK to identify your user.

YourAuthComponent.js
import { useIdentify } from '@veltdev/react';

useIdentify(user)
Make sure to call useIdentify() within a child component of the Velt Provider. Otherwise, it will not work.
8

Set the Document ID

In YourDocument.js, use the useSetDocumentId() hook from the Velt SDK to set the Document ID.

YourDocument.js
import { useSetDocumentId } from '@veltdev/react';

useSetDocumentId("my-document-id")
9

Add the VeltComments, VeltCommentTool and VeltPresence components

In App.js, add VeltComments to enable the Comments functionality.

App.js
<VeltProvider apiKey="YOUR_API_KEY">
  <VeltComments/>
  <YourAuthComponent/>
  <YourDocument/>
</VeltProvider>

In YourDocument.js, add the VeltCommentTool and VeltPresence components to test out the Comments and Presence functionality.

YourDocument.js
<div>
  <VeltPresence/>
  <VeltCommentTool/>
</div>
10

Test out the Presence and Comments functionality

​
Comments

  • Click the VeltCommentTool button, then hover over any element on the page to leave a comment.
  • Click the VeltCommentTool button, then try to draw a box on the page to leave a comment.
  • You can also highlight any text to leave a comment.

​
Presence

  • Open two browser tabs side by side with one in Incognito mode. You should see a bubble showing the other browser’s profile avatar pop up.
11

Need more details on how to integrate this into an existing app?

import { VeltProvider, VeltComments, VeltPresence } from '@veltdev/react';
import YourAuthComponent from './YourAuthComponent';
import YourDocument from './YourDocument';

export default function App() {

  return (
    <VeltProvider apiKey="YOUR_API_KEY">
      <VeltComments/>
      <VeltPresence/>
      <YourAuthComponent/>
      <YourDocument/>
    </VeltProvider>
  );
}

Was this page helpful?