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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments>
        <div id="comment-pin" slot="comment-pin">
          <img 
            data-velt-avatar-img="src"
            data-velt-priority-color="border-color" 
            data-velt-avatar-color="background-color" 
          />
        </div>
      </VeltComments>

    </VeltProvider>
  );
}

  • React / Next.js

  • HTML

1

Replace the Comment Pin

Provide a template for the Comment Pin.

Target the comment-pin slot in order to replace comment pins on the screen.

<VeltComments>
  {/* target the `comment-pin` slot in order to replace comment pins on the screen */}
  <div id="comment-pin" slot="comment-pin">
  </div>
</VeltComments>
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.

<VeltComments>
  <div id="comment-pin" slot="comment-pin">
    <img 
      data-velt-priority-color="border-color" 
      data-velt-avatar-color="background-color" 
      {/* use data attributes to bind styling */}
    />
  </div>
</VeltComments>
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.

<VeltComments>
  <div id="comment-pin" slot="comment-pin">
    <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>
</VeltComments>

Was this page helpful?

Visibility ControlsBubble