Skip to main content
1

Import the Arrow components from @veltdev/react

Import the Arrow components
import { VeltArrows, VeltArrowTool } from '@veltdev/react';
2

Place the VeltArrows component

Place the VeltArrows component at the root of your app.
<div>
  <VeltArrows/>
</div>
3

Place the VeltArrowTool component

Place the VeltArrowsTool component wherever you want the invite button to appear.
<div className="toolbar">
  <VeltArrowTool />
</div>

import { VeltArrows, VeltArrowTool } from '@veltdev/react';

function YourComponent() {

  return (
    <div>
      <VeltArrows/>
      <div className="toolbar">
        <VeltArrowTool />
      </div>
      
    </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>
    <velt-arrows></velt-arrows>
    <div class="toolbar">
      <velt-arrow-tool></velt-arrow-tool>
    </div>
    
  </body>
</html>