Setup - Velt

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>

Import the Arrow components from @veltdev/react

Import the Arrow components

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

Place the VeltArrows component

Place the VeltArrows component at the root of your app.

<div>
  <VeltArrows/>
</div>

Place the VeltArrowTool component

Place the VeltArrowsTool component wherever you want the invite button to appear.

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

Place the <velt-arrows> component

Place the <velt-arrows> component at the root of your app.

<div>
  <velt-arrows></velt-arrows>
</div>

Place the <velt-arrow-tool> component

Place the component wherever you want the invite button to appear.

<div class="toolbar">
  <velt-arrow-tool></velt-arrow-tool>
</div>

import { VeltArrows, VeltArrowTool } from '@veltdev/react'; function YourComponent() { return ( <div> <VeltArrows/> <div className="toolbar"> <VeltArrowTool /> </div> </div> ) }