Setup - Velt

import { VeltViewAnalytics } from '@veltdev/react';

function YourComponent() {

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

<!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>

React / Next.js
Other Frameworks

Import the VeltViewAnalytics component from @veltdev/react

Import the VeltViewAnalytics component

import { VeltViewAnalytics } from '@veltdev/react';

Place the VeltViewAnalytics component

Place the VeltViewAnalytics component wherever you want the View Analytics component to appear.

<div className="toolbar">
  <VeltViewAnalytics />
</div>

Place the velt-view-analytics component

Place the <velt-view-analytics> component wherever you want the View Analytics component to appear.

<div className="toolbar">
  <velt-view-analytics></velt-view-analytics>
</div>

import { VeltViewAnalytics } from '@veltdev/react';

function YourComponent() {

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

<!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>

Overview Customize Behavior

⌘I