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

# Setup

![](https://mintcdn.com/velt/gAz_vLsG-ukKamYM/images/Trends.png?fit=max\&auto=format\&n=gAz_vLsG-ukKamYM\&q=85\&s=58901f5bd8b4761f18783e00ce05af27)

> [tab] React / Next.js
>
> ## 1. Import the VeltViewAnalytics component from @veltdev/react
>
> Import the `VeltViewAnalytics` component
>
> ```jsx theme={null}
> import { VeltViewAnalytics } from '@veltdev/react';
> ```
>
> ## 2. Place the VeltViewAnalytics component
>
> Place the `VeltViewAnalytics` component wherever you want the View Analytics component to appear.
>
> ```jsx theme={null}
> <div className="toolbar">
>   <VeltViewAnalytics />
> </div>
> ```

> [tab] Other Frameworks
>
> ## 1. Place the velt-view-analytics component
>
> Place the `<velt-view-analytics>` component wherever you want the View Analytics component to appear.
>
> ```jsx theme={null}
> <div className="toolbar">
>   <velt-view-analytics></velt-view-analytics>
> </div>
> ```

```js React / Next.js theme={null}
import { VeltViewAnalytics } from '@veltdev/react';

function YourComponent() {

  return (
    <div className="toolbar">
      <VeltViewAnalytics />
    </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>
    <div className="toolbar">
      <velt-view-analytics></velt-view-analytics>
    </div>
    
  </body>
</html>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.