Comments Sidebar
Setup
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>
);
}
React / Next.js
HTML
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.
App.js
<div>
<VeltComments />
<VeltCommentsSidebar />
</div>
3
Add Sidebar button
Add the Sidebar button to toggle the sidebar.
<VeltSidebarButton />
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.
Was this page helpful?
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>
);
}