<VeltWireframe>
<VeltCommentPinWireframe>
<VeltCommentPinWireframe.GhostCommentIndicator />
<VeltCommentPinWireframe.Index />
<VeltCommentPinWireframe.PrivateCommentIndicator />
<VeltCommentPinWireframe.Triangle />
<VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltCommentPinWireframe>
</VeltWireframe>
<VeltWireframe>
<VeltCommentPinWireframe>
<VeltCommentPinWireframe.GhostCommentIndicator />
<VeltCommentPinWireframe.Index />
<VeltCommentPinWireframe.PrivateCommentIndicator />
<VeltCommentPinWireframe.Triangle />
<VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltCommentPinWireframe>
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-comment-pin-wireframe>
<velt-comment-pin-ghost-comment-indicator-wireframe></velt-comment-pin-ghost-comment-indicator-wireframe>
<velt-comment-pin-index-wireframe></velt-comment-pin-index-wireframe>
<velt-comment-pin-private-comment-indicator-wireframe></velt-comment-pin-private-comment-indicator-wireframe>
<velt-comment-pin-triangle-wireframe></velt-comment-pin-triangle-wireframe>
<velt-comment-pin-unread-comment-indicator-wireframe></velt-comment-pin-unread-comment-indicator-wireframe>
</velt-comment-pin-wireframe>
</velt-wireframe>
<VeltWireframe>
<VeltCommentPinWireframe.GhostCommentIndicator />
</VeltWireframe>
<VeltWireframe>
<VeltCommentPinWireframe.GhostCommentIndicator />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-comment-pin-ghost-comment-indicator-wireframe></velt-comment-pin-ghost-comment-indicator-wireframe>
</velt-wireframe>
Index
<VeltWireframe>
<VeltCommentPinWireframe.Index />
</VeltWireframe>
<VeltWireframe>
<VeltCommentPinWireframe.Index />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-comment-pin-index-wireframe></velt-comment-pin-index-wireframe>
</velt-wireframe>
<VeltWireframe>
<VeltCommentPinWireframe.PrivateCommentIndicator />
</VeltWireframe>
<VeltWireframe>
<VeltCommentPinWireframe.PrivateCommentIndicator />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-comment-pin-private-comment-indicator-wireframe></velt-comment-pin-private-comment-indicator-wireframe>
</velt-wireframe>
Triangle
<VeltWireframe>
<VeltCommentPinWireframe.Triangle />
</VeltWireframe>
<VeltWireframe>
<VeltCommentPinWireframe.Triangle />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-comment-pin-triangle-wireframe></velt-comment-pin-triangle-wireframe>
</velt-wireframe>
<VeltWireframe>
<VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltWireframe>
<VeltWireframe>
<VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltWireframe>
<velt-wireframe style="display:none;">
<velt-comment-pin-unread-comment-indicator-wireframe></velt-comment-pin-unread-comment-indicator-wireframe>
</velt-wireframe>
Styling
Disable ShadowDOM
- By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
- Disable the shadow dom to apply your custom CSS to the component.
Default: true
Using Props:
<VeltComments pinShadowDOM={false} />
Using API:
const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
Using Props:
<VeltComments pinShadowDOM={false} />
Using API:
const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
Using Props:
<velt-comments pin-shadow-dom="false"></velt-comments>
Using API:
const commentElement = Velt.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
Dark Mode
By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.
Default: false
Using Props:
<VeltComments pinDarkMode={true}/>
Using API:
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Using Props:
<VeltComments pinDarkMode={true}/>
Using API:
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
Using Props:
<velt-comments pin-dark-mode="true"></velt-comments>
Using API:
const commentElement = Velt.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
