Skip to main content
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?

Check out this guide on how to set up Velt with your 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>
  );
}

import { useIdentify} from "@veltdev/react";
import { useState } from "react";

export default function YourAuthComponent() {

  const userService = () => {
    return {
      uid: "user1",
      displayName: "User 1",
      email: "user1@velt.dev",
      photoURL: "https://i.pravatar.cc/301"
    };
  };

  // Fetch user data from user service
  let yourAuthenticatedUser = userService();
  const { uid, displayName, email, photoURL } = yourAuthenticatedUser;

  // Create the Velt user object
  let veltUser = {
    userId: uid,
    name: displayName,
    email: email,
    photoUrl: photoURL,
  };

  //identify Velt user
  useIdentify(veltUser)

  let [user,setUser] = useState(veltUser)

  return <div>User: {user?.userId}</div>;
}

import {  useSetDocumentId, VeltCommentTool, VeltPresence } from '@veltdev/react';
import { useEffect, useState } from 'react';

export default function YourDocument() {

  useSetDocumentId('my-document-id')

  return (
    <div>
      <VeltCommentTool/>
    </div>
    
  );
}