Setup

React / Next.js

1. Import Huddle Component

   Import the Huddle component from the React library.

   import { VeltHuddle, VeltHuddleTool } from '@veltdev/react';
   
2. Add Huddle Component

   Add the VeltHuddle component to the root of your app.

   <VeltHuddle />
   

   This component is required to render Huddle UI components and Huddle users in your app.

3. Add Huddle Tool Component

   Add the VeltHuddleTool component wherever you want to show the Huddle tool button.

   Clicking on it initiates a huddle.

   <div className="toolbar">
         <VeltHuddleTool type='all' />
   </div>
   

Other Frameworks

1. Place the <velt-huddle> component

   Add the VeltHuddle component to the root of your app.

   This component is required to render Huddle UI components and Huddle users in your app.

   <div>
     <velt-huddle></velt-huddle>
   </div>
   
2. Place the <velt-huddle-tool> component

   Add the VeltHuddleTool component wherever you want to show the Huddle tool button.

   Clicking on it initiates a Huddle.

   <div>
     <velt-huddle-tool></velt-huddle-tool>
   </div>
   

React / Next.js

import { VeltHuddle, VeltHuddleTool} from '@veltdev/react';

export default function App() {

  return (
    <VeltHuddle /> {/* Add VeltHuddle at the root of your app */}

    <div className="toolbar">
      <VeltHuddleTool type='all' /> {/* Add VeltHuddleTool where you want the huddle button to appear */}
    </div>
  );
}

<div>
  <velt-huddle></velt-huddle> <!-- Add velt-huddle component at the root of your app -->
  <velt-huddle-tool></velt-huddle-tool> <!-- Add velt-huddle-tool where you want the huddle button to appear-->
</div>