Quickstart
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>
);
}
Create a React app
npx create-react-app my-app
Install the Velt React package onto your app
cd my-app && npm install @veltdev/react
Install types (optional)
If you’re using TypeScript, you can install the types package.
npm install --save-dev @veltdev/types
Grab your Velt API Key
Go to console.velt.dev and grab your Velt API Key
Safelist your domain
In the Velt console, add the URL where your app is deployed to the list of Managed Domains.
Configure the VeltProvider
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>
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();
Identify your user
In YourAuthComponent.js, use the Velt client to identify your user.
await client.identify(user)
Set the Document ID
In YourDocument.js, use the Velt client to set the Document ID.
client.setDocumentId('unique-document-id');
Add the VeltComments, VeltCommentsTool and VeltPresence components
In App.js, add VeltComments
and VeltPresence
to enable the Comments
and Presence
functionality.
<VeltProvider apiKey="YOUR_API_KEY">
<VeltComments/>
<VeltPresence/>
<YourAuthComponent/>
<YourDocument/>
</VeltProvider>
In YourDocument.js, add the VeltCommentsTool
to test out the Comments
functionality.
<div>
<VeltCommentsTool/>
</div>
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.
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.
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
Was this page helpful?
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>
);
}