ReactionSDK overlay code examples

Copy any example or run it in the SDK playground—overlays on reaction-video, not recorded reaction video. For ReactifySDK threads and recording, see ReactifySDK code examples.

Overlay configuration

Configure which overlays appear and where (tap, poll, rating, slider, and CTA; position and cta-text).

Overlay configuration

Run in Playground

<reaction-video
  src="video.mp4"
  overlays="tap,poll,rating,slider,cta"
  poll-question="Which style do you prefer?"
  cta-text="Buy Now"
  overlay-position="bottom-center"
  interaction-type="tap"
></reaction-video>

Run in Playground to see this config on the live demo.

Poll creation

Add a poll overlay with a custom question and CTA.

Poll creation

Run in Playground

<reaction-video
  src="video.mp4"
  overlays="poll"
  poll-question="Which product do you prefer?"
  cta-text="See results"
  overlay-position="bottom-center"
  interaction-type="poll"
></reaction-video>

Run in Playground to try the poll overlay.

Interaction tracking

Track tap, rating, and slider interactions; events appear in the Playground event log and in your dashboard.

Interaction tracking (tap + rating)

Run in Playground

<reaction-video
  src="video.mp4"
  overlays="tap,rating"
  cta-text="Learn more"
  overlay-position="bottom-right"
  interaction-type="tap"
></reaction-video>

Run in Playground and interact to see events in the Events panel.

Analytics events

Events (impression, interaction, poll vote, CTA click) are sent to ReactionSaaS and visible in the analytics dashboard.

Full config for analytics (all overlay types)

Run in Playground

<reaction-video
  src="https://yourcdn.com/product-demo.mp4"
  overlays="tap,poll,rating,slider,cta"
  poll-question="Rate this product"
  cta-text="Add to cart"
  overlay-position="bottom-center"
  interaction-type="rating"
></reaction-video>

Run in Playground to see all overlay types; then check the dashboard for analytics.

Conditional CTA (ReactionSDK, Intelligence tier)

Reveal the CTA only when conditions are met (e.g. pause time, watch %, overlay hover). Use the same tap overlay; configure CTA rules in Dashboard → Campaign → CTA Rules.

Conditional CTA

Run in Playground

<reaction-video
  src="video.mp4"
  overlays="tap"
  cta-text="Learn more"
  overlay-position="bottom-center"
  interaction-type="tap"
></reaction-video>
<!-- CTA rules (pause_time, watch_percent, overlay_hover) are set in Dashboard → Campaign → CTA Rules -->

Run in Playground to try Conditional CTA. Configure rules in Dashboard for your campaign.