import { VeltProvider, VeltCommentsSidebar, VeltSidebarButton,} from '@veltdev/react';export default function App() { return ( <VeltProvider apiKey="API_KEY"> <VeltComments /> {/* Add VeltComments to the root of your app provider */} <VeltCommentsSidebar pageMode={true} /> {/* Add VeltCommentsSidebar to the root of your app provider */} <div className="toolbar"> <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */} </div> </VeltProvider> );}
Setup
Page Mode Setup
Copy
Ask AI
import { VeltProvider, VeltCommentsSidebar, VeltSidebarButton,} from '@veltdev/react';export default function App() { return ( <VeltProvider apiKey="API_KEY"> <VeltComments /> {/* Add VeltComments to the root of your app provider */} <VeltCommentsSidebar pageMode={true} /> {/* Add VeltCommentsSidebar to the root of your app provider */} <div className="toolbar"> <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */} </div> </VeltProvider> );}
1
Import CommentsSidebar Components
Import the Comments Sidebar Components.
Copy
Ask AI
import { VeltProvider, VeltCommentsSidebar, VeltSidebarButton,} from '@veltdev/react';
2
Add Comments and Sidebar components
Add the VeltComments and VeltCommentsSidebar components to the root of your app.
Test Page Mode out by opening the sidebar. You should be able to leave Page Mode comments at the bottom of the Comments Sidebar.
Copy
Ask AI
import { VeltProvider, VeltCommentsSidebar, VeltSidebarButton,} from '@veltdev/react';export default function App() { return ( <VeltProvider apiKey="API_KEY"> <VeltComments /> {/* Add VeltComments to the root of your app provider */} <VeltCommentsSidebar pageMode={true} /> {/* Add VeltCommentsSidebar to the root of your app provider */} <div className="toolbar"> <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */} </div> </VeltProvider> );}