Velt Reactions Best Practices

Implementation guide for the Velt Inline Reactions feature — emoji reactions anchored to specific elements of your app (articles, posts, images, charts, custom UI). One root component, one required prop, optional custom emoji map, and a rich wireframe layer for building custom UI.

When to Apply

Reference these guidelines when:

• Adding inline reactions to a page section, post, or any container with a stable element id
• Binding <VeltInlineReactionsSection> to that container via targetReactionElementId
• Configuring custom reaction emojis (image URLs, alternate iconUrl, or unicode emoji)
• Calling client.getReactionElement().setCustomReactions(...) from non-React or runtime code
• Building custom reaction UI (custom pin, custom emoji picker, custom tooltip) via the wireframe tags
• Reading componentConfig.annotation, componentConfig.isReactionSelectedByCurrentUser, componentConfig.tooltipVisible, or the per-iteration user / emoji / isSelected context variables
• Typing against ReactionAnnotation / ReactionPinType

Related Velt skills

• Comment reactions — comments and reactions share the same setCustomReactions config; the same custom emoji map flows through commentElement.setCustomReactions(...) (see velt-comments-best-practices). Configure once at the right scope; don't duplicate per feature.
• Self-hosting reaction data — velt-self-hosting-data-best-practices documents the resolver-request shapes for persisting reactions yourself (SaveReactionResolverRequest, DeleteReactionResolverRequest, etc.). Cross-reference, don't duplicate.