Setup

import { VeltInlineReactionsSection } from '@veltdev/react';

export default function App() {

  return (
      <section id="container-id">
        <div>Your Article</div>

        <VeltInlineReactionsSection
          targetReactionElementId="container-id"
        />

      </section>  
  );
}

<!DOCTYPE html>
<html lang="en">
  <body>

    <section id="container-id">
      <div>Your Article</div>

      <velt-inline-reactions-section
        target-reaction-element-id="container-id">
      </velt-inline-reactions-section>

    </section>

  </body>
</html>

React / Next.js
Other Frameworks

Import Velt Inline Reactions Section component

Import the VeltInlineReactionsSection component.

import { VeltInlineReactionsSection } from '@veltdev/react';

Add container to hold Inline Reactions component

Create an element to hold your Inline Reactions component, such as a div or section.
Add a unique element id to it.

<section id="container-id">
	<div>Your Article</div>
</section>

Add VeltInlineReactionsSection component

Add VeltInlineReactionsSection component inside your container.
Add targetReactionElementId property to the Velt Inline Reactions component. This needs to match the id you set to the container. This binds the Inline Reactions component with the desired container.

<section id="container-id">
	<div>Your Article</div>

	<VeltInlineReactionsSection
		targetReactionElementId="container-id"
	/>

</section>

Add container to hold Inline Reactions component

Create an element to hold your Inline Reactions component, such as a div or section.
Add a unique element id to it.

<section id="container-id">
	<div>Your Article</div>
</section>

Add Velt Inline Reactions Section component

Add velt-inline-reactions-section component inside your container.
Add target-reaction-element-id property to the Velt Inline Reactions component. This needs to match the id you set to the container. This binds the Inline Reactions component with the desired container.

<section id="container-id">
	<div>Your Article</div>

	<velt-inline-reactions-section
		target-reaction-element-id="container-id">
	</velt-inline-reactions-section>

</section>

import { VeltInlineReactionsSection } from '@veltdev/react';

export default function App() {

  return (
      <section id="container-id">
        <div>Your Article</div>

        <VeltInlineReactionsSection
          targetReactionElementId="container-id"
        />

      </section>  
  );
}

<!DOCTYPE html>
<html lang="en">
  <body>

    <section id="container-id">
      <div>Your Article</div>

      <velt-inline-reactions-section
        target-reaction-element-id="container-id">
      </velt-inline-reactions-section>

    </section>

  </body>
</html>

Overview Overview

⌘I

Get Started

Agentic Setup

Key Concepts

Async Collaboration

Realtime Collaboration

AI

Self-Host Data

Backend SDKs

Model Context Protocol

Webhooks

Security

Miscellaneous

Import Velt Inline Reactions Section component

Add container to hold Inline Reactions component

Add VeltInlineReactionsSection component

Add container to hold Inline Reactions component

Add Velt Inline Reactions Section component