> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart Old Copy

> Quickstart for React. For other frameworks like `vue`, `angular`, `svelte`, `vanilla js` etc. check out the setup guide.

<Steps titleSize="h2">
  <Step title="Create a React app">
    Create a new React app [using any method](https://react.dev/learn/start-a-new-react-project) you prefer.
  </Step>

  <Step title="Install the Velt React package onto your app">
    ```bash Terminal theme={null}
    cd my-app && npm install @veltdev/react
    ```
  </Step>

  <Step title="Install types (optional)">
    If you're using TypeScript, you can install the types package.

    ```bash Terminal theme={null}
    npm install --save-dev @veltdev/types
    ```
  </Step>

  <Step title="Grab your Velt API Key">
    Go to [console.velt.dev](https://console.velt.dev) and grab your Velt API Key

    <Frame>
      <img src="https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/velt-console-api-key.png?fit=max&auto=format&n=gY7ilEx2g4g3-HVe&q=85&s=4f1f9f9134b21226a258dc6df730acb0" alt="" width="3518" height="1764" data-path="images/velt-console-api-key.png" />
    </Frame>
  </Step>

  <Step title="Safelist your domain">
    In the Velt console, add the URL where your app is deployed to the list of Managed Domains.

    <Frame>
      <img src="https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/velt-console-add-website.png?fit=max&auto=format&n=gY7ilEx2g4g3-HVe&q=85&s=dfd1cbd5f46c28c82ccab8122f30c3eb" alt="" width="3514" height="1768" data-path="images/velt-console-add-website.png" />
    </Frame>
  </Step>

  <Step title="Configure the VeltProvider">
    In **App.js**, add the `VeltProvider` component to the root of your app with your Velt API Key.

    ```js App.js theme={null}
    <VeltProvider apiKey="YOUR_API_KEY">
      <YourAuthComponent/>
      <YourDocument/>
    </VeltProvider>
    ```
  </Step>

  <Step title="Identify your user">
    In **YourAuthComponent.js**, use the `useIdentify()` hook from the Velt SDK to identify your user.

    ```js YourAuthComponent.js theme={null}
    import { useIdentify } from '@veltdev/react';

    useIdentify(user)
    ```

    <Warning>Make sure to call `useIdentify()` within a child component of the Velt Provider. Otherwise, it will not work.</Warning>
  </Step>

  <Step title="Set the Document ID">
    In **YourDocument.js**, use the `useSetDocumentId()` hook from the Velt SDK to set the Document ID.

    ```js YourDocument.js theme={null}
    import { useSetDocumentId } from '@veltdev/react';

    useSetDocumentId("my-document-id")
    ```
  </Step>

  <Step title="Add the VeltComments, VeltCommentTool and VeltPresence components">
    In **App.js**, add `VeltComments` to enable the `Comments` functionality.

    ```js App.js theme={null}
    <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.

    ```js YourDocument.js theme={null}
    <div>
      <VeltPresence/>
      <VeltCommentTool/>
    </div>
    ```
  </Step>

  <Step title="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.
  </Step>

  <Step title="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](/get-started/quickstart)
  </Step>
</Steps>

<RequestExample>
  ```jsx App.js theme={null}
  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>
    );
  }
  ```

  ```jsx YourAuthComponent.js theme={null}
  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>;
  }
  ```

  ```jsx YourDocument.js theme={null}
  import {  useSetDocumentId, VeltCommentTool, VeltPresence } from '@veltdev/react';
  import { useEffect, useState } from 'react';

  export default function YourDocument() {

    useSetDocumentId('my-document-id')

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