import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.enableInboxMode(); // 2
      commentElement.disableInboxMode(); // 2
      commentElement.enablePopoverMode(); // 3
      commentElement.disablePopoverMode(); // 3
      commentElement.enablePopoverTriangleComponent(); // 4
      commentElement.disablePopoverTriangleComponent(); // 4
      commentElement.enableStreamMode(); // 5
      commentElement.disableStreamMode(); // 5
      commentElement.enableTextComments(); // 6
      commentElement.disableTextComments(); // 6
      commentElement.enablePersistentCommentMode(); // 7
      commentElement.disablePersistentCommentMode(); // 7
      commentElement.enableInlineCommentMode(); // 8
      commentElement.disableInlineCommentMode(); // 8
    }
    

  })

  return (
    <div>

        <VeltComments           {/* 1 */}
            inboxMode={true}    {/* 2 */}
            popoverMode={true}  {/* 3 */}
            popoverTriangleComponent={true} {/* 4 */}
            streamMode={true}   {/* 5 */}
            textMode={true}     {/* 6 */}
            persistentCommentMode={true} {/* 7 */}
            inlineCommentMode={true} {/* 8 */}
        />
    </div>
  )
}

  • React / Next.js

  • HTML

1

Freestyle mode

For a complete setup guide for Freestyle mode, read here.

Whether Freestyle Mode is enabled.

Default: true

<VeltComments/> {/* Freestyle mode is enabled by default when you use VeltComments}
2

Inbox mode

For a complete setup guide for Inbox mode, read here.

Whether Inbox Mode is enabled.

Default: false

<VeltComments inboxMode={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableInboxMode();
commentElement.disableInboxMode();
3

Popover mode

For a complete setup guide for Popover mode, read here.

Whether Popover Mode is enabled.

Default: false

<VeltComments popoverMode={true}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enablePopoverMode();
commentElement.disablePopoverMode();
4

Enable Popover mode triangle

Whether the popover triangle appears when Popover Mode is enabled.

Default: true

<VeltComments popoverTriangleComponent={true}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enablePopoverTriangleComponent();
commentElement.disablePopoverTriangleComponent();
5

Stream mode

For a complete setup guide for Stream mode, read here.

Whether Stream Mode is enabled.

Default: false

<VeltComments streamMode={true}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enableStreamMode();
commentElement.disableStreamMode();
6

Text mode

For a complete setup guide for Text mode, read here.

Whether Text Mode is enabled.

Default: true

<VeltComments textMode={true}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enableTextComments();
commentElement.disableTextComments();
7

Persistent comment mode

Whether Persistent comment mode is enabled.

Default: false

When Persistent comment mode is enabled, you can continue leave additional comments after finishing a comment.

When it is disabled, you will need to reclick the Comment Tool every time when you want to make a comment.

<VeltComments persistentCommentMode={true}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enablePersistentCommentMode();
commentElement.disablePersistentCommentMode();
8

Inline Comment Mode

Whether In-line comment mode is enabled.

When In-line comment mode is enabled, comments will appear under the text they are associated with in the DOM, instead of as a pop up window.

Default: false

<VeltComments inlineCommentMode={true}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.enableInlineCommentMode();
commentElement.disableInlineCommentMode();

Was this page helpful?

General ControlsMultimedia Features