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

# Setup

<Tabs>
  <Tab title="React / Next.js">
    <Steps titleSize="h2">
      <Step title="Import VeltUserRequestTool from @veltdev/react">
        Import the `VeltUserRequestTool` component.

        ```js theme={null}
        import { VeltUserRequestTool } from '@veltdev/react';
        ```
      </Step>

      <Step title="Place the VeltUserRequestTool component">
        Place the component wherever you want the invite button to appear.

        ```js theme={null}
        <div className="toolbar">
          <VeltUserRequestTool />
        </div>
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Other Frameworks">
    <Steps titleSize="h2">
      <Step title="Place the <velt-user-request-tool> component">
        Place the component wherever you want the invite button to appear.

        ```jsx theme={null}
        <div class="toolbar">
          <velt-user-request-tool></velt-user-request-tool>
        </div>
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

<RequestExample>
  ```js React / Next.js theme={null}
  import { VeltUserRequestTool } from '@veltdev/react';

  function YourComponent() {

    return (
      <div className="toolbar">
        <VeltUserRequestTool />
      </div>
    )
    
  }
  ```

  ```html HTML theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Collaboration App</title>
      <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
      <script>
        async function loadVelt() {
          await Velt.init("YOUR_VELT_API_KEY");
        }
      </script>
    </head>
    <body>
      <!-- Place the <velt-user-request-tool> component -->
      <div class="toolbar">
        <velt-user-request-tool></velt-user-request-tool>
      </div>
    </body>
  </html>
  ```
</RequestExample>
