ReactionSaaS
Documentation

Shopify installation (ReactionSDK)

Install the ReactionSDK Shopify app for on-video overlays on reaction-video / plain video.

Overlay template settings below apply to plain HTML5 video tags (data-reaction or attach-all). They do not configure reaction-video embeds—set poll-question, poll-options, overlay-timing-seconds, and related attributes on the tag. Dashboard campaign hosts (data-reaction-video + campaign id) use your ReactionSaaS campaign config only.

Recorded reaction threads? Use the separate ReactifySDK Shopify guide.

1) Install the ReactionSDK Shopify app

Install ReactionSDK by ReactionSaaS from the Shopify App Store (or connect from ReactionSaaS). The embedded app opens at https://www.reactionsaas.com/integrations/shopify/reactionsdk inside Shopify Admin. Use the dashboard page when linking a store from a logged-in ReactionSaaS account.

  • Embedded app (Partner Dashboard App URL): https://www.reactionsaas.com/integrations/shopify/reactionsdk
  • Dashboard (account linking): https://www.reactionsaas.com/dashboard/integrations/shopify/reactionsdk
  • Storefront loader: ScriptTag → sdk.js

Alternative: paste reaction_sdk.liquid in your theme or use the manual theme pack.

ReactionSDK
<!-- Add to theme.liquid (before </body>) -->
<script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/sdk.js?v=2.0.8" defer></script>

2) Embed video

Choose one embed style. Theme overlay settings in the app or theme editor apply only to plain video tags—not to reaction-video.

reaction-video (zero-config element)
<!-- Add to a section/snippet where your product video renders -->
<reaction-video src="{{ product.featured_media | media_url }}"></reaction-video>
Plain video (theme / app overlay settings)
<!-- Theme / app overlay settings apply to plain video tags -->
<video
  data-reaction
  data-reaction-video-id="product-hero"
  src="{{ product.featured_media | media_url }}"
  controls
></video>

3) Configure overlays

On reaction-video, set interaction-type, poll-options, and overlay-timing-seconds on the tag. Poll overlays need poll-options (comma-separated). Timing is seconds of playback before the overlay appears.

Poll on reaction-video
<!-- reaction-video: configure overlays on the tag (not theme settings) -->
<reaction-video
  src="{{ product.featured_media | media_url }}"
  interaction-type="poll"
  poll-question="Which style do you prefer?"
  poll-options="Classic, Modern, Bold"
  overlay-timing-seconds="5"
  overlay-position="bottom-center"
></reaction-video>
Full poll example (Liquid)
<reaction-video
  src="{{ product.featured_media | media_url }}"
  interaction-type="poll"
  poll-question="Which color do you prefer?"
  poll-options="Red, Blue, Green"
  overlay-timing-seconds="5"
  overlay-position="bottom-center"
></reaction-video>
Run in Playground
<reaction-video src="video.mp4" interaction-type="poll" poll-question="Add to cart?" poll-options="Yes, Maybe, No" overlay-timing-seconds="5" overlay-position="bottom-center"></reaction-video>

Try this config in the Playground.

4) View analytics dashboard

Open the dashboard to see impressions, interactions, and engagement analytics.

Try it live

Preview overlay interactions on a sample video (same demo as the docs playground).

Rate:
ReactionSDK demo