Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/llms.txt

Use this file to discover all available pages before exploring further.

1

Import CommentsSidebar Components

Import the Comments Sidebar Components.
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.
<div>
  <VeltComments />
  <VeltCommentsSidebar />
</div>
3

Enable Page Mode

Set the pageMode attribute to true on the VeltCommentsSidebar component.
App.js
  <VeltCommentsSidebar pageMode={true}/>
4

Add Sidebar button component

Add the Sidebar button to toggle the sidebar.
<div className="toolbar">
  <VeltSidebarButton />
</div>
5

Test Page Mode

Test Page Mode out by opening the sidebar. You should be able to leave Page Mode comments at the bottom of the Comments Sidebar.
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>
  );
}