import { 
  VeltProvider, 
  VeltCommentBubble
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltCommentBubble>
        <div slot="content" class="custom-comment-bubble">
          <img 
            data-velt-avatar-img="src"
            data-velt-priority-color="border-color" 
            data-velt-avatar-color="background-color" 
          />
        </div>
      </VeltCommentBubble>

    </VeltProvider>
  );
}
  • React / Next.js

  • HTML

1

Replace the Comment Bubble

Provide a template for the Comment Bubble. Target the content slot in order to replace comment bubbles on the screen.

<VeltCommentBubble>
  {/* target the `content` slot in order to replace comment pins on the screen */}
  <div slot="content" class="custom-comment-bubble">
  </div>
</VeltCommentBubble>
2

Bind data to the element style

Use data attributes to bind information like the comment status or priority color.

Set the style property target as the value of the data attribute. If you don’t provide one, we’ll make our best guess.

<VeltCommentBubble>
  <div slot="content" class="custom-comment-bubble">
    <img 
      data-velt-priority-color="border-color" 
      data-velt-avatar-color="background-color" 
      {/* use data attributes to bind styling */}
    />
  </div>
</VeltCommentBubble>
3

Bind data to an element attribute

Use data attributes to bind information like the user’s avatar src, the comment thread length, etc.

Set the attribute target as the value of the data attribute. If you don’t provide one, we’ll make our best guess.

<VeltCommentBubble>
  <div slot="content" class="custom-comment-bubble">
    <img 
      data-velt-avatar-img="src" {/* use data atributes to bind information */}
      data-velt-priority-color="border-color" 
      data-velt-avatar-color="background-color" 
    />
  </div>
</VeltCommentBubble>