- React / Next.js
- Other Frameworks
Import CommentsSidebar Components
Import the Comments Sidebar Components.
import {
VeltProvider,
VeltCommentsSidebar,
VeltSidebarButton,
} from '@veltdev/react';
Add Comments and Sidebar components
Add the
VeltComments and VeltCommentsSidebar components to the root of your app.<div>
<VeltComments />
<VeltCommentsSidebar />
</div>
Enable Page Mode
Set the
pageMode attribute to true on the VeltCommentsSidebar component.App.js
<VeltCommentsSidebar pageMode={true}/>
Add Sidebar button component
Add the Sidebar button to toggle the sidebar.
<div className="toolbar">
<VeltSidebarButton />
</div>
Place the `<velt-comments-sidebar>` component
Place the
<velt-comments-sidebar> component at the root of your app.<velt-comments-sidebar></velt-comments-sidebar>
Enable Page Mode
Enable Page Mode by setting the
page-mode attribute to true on the <velt-comments-sidebar> component.<velt-comments-sidebar page-mode="true"></velt-comments-sidebar>
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>
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>
);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Collaboration App</title>
<script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
<script>
async function loadVelt() {
await Velt.init("YOUR_VELT_API_KEY");
}
</script>
</head>
<body>
<velt-comments></velt-comments> <!-- add to the root of your app-->
<velt-comments-sidebar page-mode="true"></velt-comments-sidebar> <!-- add to the root of your app -->
<div class="toolbar"> <!-- a component representing a toolbar-->
<velt-sidebar-button></velt-sidebar-button> <!-- add wherever you want it to appear -->
</div>
</body>
</html>