Setup
Inline Comments Setup
1
Import Comment components
Import the VeltProvider
, VeltComments
, and VeltInlineCommentsSection
component.
2
Add VeltComments component
- Add the
VeltComments
component to the root of your app where yourVeltProvider
is. - This component is required to render comments in your app.
3
Add container to hold Inline Comments component
- Create an element to hold your Inline Comments component, such as a
div
orsection
. - Add a unique element
id
to it. - (optional) Set the same id to the
data-velt-target-inline-comment-element-id
attribute. This is used in advanced scenarios, eg: This ensures that if you add a freestyle or text comment within this container, it will appear in inline comments component too.
4
Add VeltInlineCommentsSection component
- Add
VeltInlineCommentsSection
component inside your container. - Add
targetElementId
property to the Velt Inline Comments component. This needs to match the id you set to the container. This binds the Inline Comments component with the desired container.
5
(Optional) Make it single threaded or multithreaded
- Default:
true
- By default inline comment section is multithreaded.
- You can make it single threaded by setting
multiThread
attribute tofalse
.
1
Import Comment components
Import the VeltProvider
, VeltComments
, and VeltInlineCommentsSection
component.
2
Add VeltComments component
- Add the
VeltComments
component to the root of your app where yourVeltProvider
is. - This component is required to render comments in your app.
3
Add container to hold Inline Comments component
- Create an element to hold your Inline Comments component, such as a
div
orsection
. - Add a unique element
id
to it. - (optional) Set the same id to the
data-velt-target-inline-comment-element-id
attribute. This is used in advanced scenarios, eg: This ensures that if you add a freestyle or text comment within this container, it will appear in inline comments component too.
4
Add VeltInlineCommentsSection component
- Add
VeltInlineCommentsSection
component inside your container. - Add
targetElementId
property to the Velt Inline Comments component. This needs to match the id you set to the container. This binds the Inline Comments component with the desired container.
5
(Optional) Make it single threaded or multithreaded
- Default:
true
- By default inline comment section is multithreaded.
- You can make it single threaded by setting
multiThread
attribute tofalse
.
1
Add velt-comments component
- Add the Velt Comments component to the root of your app.
- This component is required to render comments in your app.
2
Add container to hold Inline Comments component
- Create an element to hold your Inline Comments component, such as a
div
orsection
. - Add a unique element
id
to it. - (optional) Set the same id to the
data-velt-target-inline-comment-element-id
attribute. This is used in advanced scenarios, eg: This ensures that if you add a freestyle or text comment within this container, it will appear in inline comments component too.
3
Add velt-inline-comments-section component
- Add
velt-inline-comments-section
component inside your container. - Add
target-element-id
property to the Velt Inline Comments component. This needs to match the id you set to the container. This binds the Inline Comments component with the desired container.
4
(Optional) Make it single threaded or multithreaded
- Default:
true
- By default inline comments are multithreaded.
- You can make it single threaded by setting
multi-thread
attribute tofalse
.
Was this page helpful?