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

Terminal
npx create-react-app my-app
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

Initialize the Velt client

Import useVeltClient and then use it to initialize the Velt client.

You will need to do this in both YourAuthComponent.js and YourDocument.js.

import { useVeltClient } from '@veltdev/react';

const { client } = useVeltClient();
8

Identify your user

In YourAuthComponent.js, use the Velt client to identify your user.

YourAuthComponent.js
await client.identify(user)
9

Set the Document ID

In YourDocument.js, use the Velt client to set the Document ID.

YourDocument.js
client.setDocumentId('unique-document-id');
10

Add the VeltComments, VeltCommentsTool and VeltPresence components

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

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

In YourDocument.js, add the VeltCommentsToolto test out the Comments functionality.

YourDocument.js
<div>
  <VeltCommentsTool/>
</div>
11

Test out the Presence and Comments functionality

Comments

  • Click the VeltCommentsTool button, then hover over any element on the page to leave a comment.
  • Click the VeltCommentsTool 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.
12

Need an example?

Fork this repo if you want all the steps above done for you. You will still need to use your own Velt API Key.

Github Repo

CodeSandBox Link

View Demo in Larger Window

Deploy with Vercel

13

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

Was this page helpful?

Overview1. Install