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> );}
Comments Sidebar
Setup
Copy
Ask AI
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> );}
1
Import Comments Sidebar Components
Import the Comments Sidebar Components.
Copy
Ask AI
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.
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.
Copy
Ask AI
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> );}