Page Mode Setup

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>

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>

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.

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>

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>
  );
}

<!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>

Freestyle Setup Popover Setup

⌘I