Quickstart

Create a new React app using any method you prefer.

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

npm install --save-dev @veltdev/types

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

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

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

<VeltProvider apiKey="YOUR_API_KEY">
  <YourAuthComponent/>
  <YourDocument/>
</VeltProvider>

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

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

useIdentify(user)

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

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

useSetDocumentId("my-document-id")

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

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

<div>
  <VeltPresence/>
  <VeltCommentTool/>
</div>

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.

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

Check out this guide on how to set up Velt with your existing app