Skip to main content
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.

​
V2 Setup

The V2 sidebar is a fully primitive-based implementation. Use it by either importing VeltCommentsSidebarV2 directly or passing version="2" on the existing VeltCommentsSidebar.
Option A — Direct import:
import {
  VeltProvider,
  VeltCommentsSidebarV2,
  VeltSidebarButton,
  VeltCommentTool
} from '@veltdev/react';

export default function App() {
  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments />
      <VeltCommentsSidebarV2 />
      <div className="toolbar">
        <VeltCommentTool />
        <VeltSidebarButton />
      </div>
    </VeltProvider>
  );
}
Option B — Version prop on existing component:
<VeltCommentsSidebar version="2" />
For V2 props reference, see VeltCommentsSidebarV2Props. For V2 wireframe customization, see Comment Sidebar V2 UI Customization. 
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>
  );
}