Setup

React / Next.js

1. Import Comments Sidebar Components

   Import the Comments Sidebar Components.

   import { 
     VeltProvider, 
     VeltCommentsSidebar, 
     VeltSidebarButton,
     VeltCommentTool 
   } from '@veltdev/react';
   
2. Add Comments and Sidebar components

   Add the VeltComments and VeltCommentsSidebar components to the root of your app.

   <div>
     <VeltComments />
     <VeltCommentsSidebar />
   </div>
   
3. Add Sidebar button and Comment Tool component

   Add the Sidebar button to toggle the sidebar. Add the VeltCommentTool component to leave comments.

   <div className="toolbar">
     <VeltSidebarButton />
     <VeltCommentTool />
   </div>
   

   This is completely optional and you can toggle the sidebar in the comment dialog as well.

4. Test Integration

   Test it out by opening the sidebar.

   You should be able to click the All comments link in a comment dialog box on the bottom.

Other Frameworks

1. Place the <velt-comments-sidebar> component

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

   <velt-comments-sidebar></velt-comments-sidebar>
   
2. Place the <velt-sidebar-button> component

   Place the <velt-sidebar-button> component wherever you want the toggle button to appear.

   <velt-sidebar-button></velt-sidebar-button>
   

React / Next.js

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments /> {/* Add VeltComments to the root of your app provider */}
      <VeltCommentsSidebar /> {/* Add VeltCommentsSidebar to the root of your app provider */}

      <div className="toolbar">
        <VeltCommentTool /> {/* Add VeltCommentTool wherever you want it to appear */}
        <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */}
      </div>

    </VeltProvider>
  );
}