ReactionSaaS
Documentation

WooCommerce

On product pages, use sdk.js (or the plugin path) with reaction-video and ReactionSDK overlays (tap, poll, rating, slider, and CTA) before cart—overlay engagement, not recorded shopper clips by default. WooCommerce shares the WordPress install surface—see the WP guide for the managed plugin. Add ReactifySDK for recorded buyer reactions, proof clips, and thread UGC when ready.

Prerequisites

  • ReactionSaaS account with API key and allowed origins including your live site hostname.
  • Permission to add custom JavaScript or HTML in WooCommerce.
  • For ReactifySDK (recorded reactions, threads, widgets): template or thread IDs from the Reactify marketplace when you add that layer.

Where to paste the script

  • Appearance → Theme File Editor footer (child theme recommended) or a Code snippets plugin loading in the footer.
  • WooCommerce-specific templates (single product, checkout) can host embeds next to galleries or below the add-to-cart area.
  • For a managed path, use the WordPress plugin flow in the WordPress install guide instead of raw theme code.

ReactionSDK overlay options

On reaction-video, set the overlays attribute to a comma-separated list. All five standard types are: tap, poll, rating, slider, and CTA. You can enable one or many (e.g. overlays="tap,poll,rating,slider,cta"). Use interaction-type to choose which overlay is primary for the first interaction (typically tap, poll, rating, or slider).

  • tap — Binary or multi-choice tap targets; pair with cta-text / options as in your campaign config.
  • poll — Poll row; set poll-question (and campaign options when using the dashboard).
  • rating — Star-style rating capture on the video.
  • slider — Slider / spectrum input for intensity or preference.
  • cta — Dedicated CTA overlay; use cta-text (and destination URL from campaign settings when applicable).

Test every type in the SDK playground — toggle overlays and copy the generated embed.

For the WordPress plugin install (recommended for many stores), follow WordPress installation — the same plugin powers WooCommerce sites. Put ReactionSDK overlays (tap, poll, rating, slider, and CTA) on the product story first; add ReactifySDK for recorded buyer reactions, feeds, or threads once overlays are working.

Example: sdk.js + reaction-video (ReactionSDK overlays)

The production bundle registers both window.reactionSDK and window.Reactify. The snippet below enables all five overlay types on one element for integration testing; in production you can omit any you do not need. ReactionSDK here means tap, poll, rating, slider, and CTA—not visitor-recorded clips. Zero-config path (demo / tests): you may omit init and use only the script tag plus reaction-video with overlay attributes—events use the built-in demo key until you call init with your API key.

<script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/sdk.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    var sdk = window.reactionSDK || window.Reactify;
    if (!sdk || !sdk.init) return;
    sdk.init({
      apiKey: 'YOUR_API_KEY',
      baseUrl: 'https://YOUR_APP_ORIGIN',
      mode: 'production',
      allowedOrigins: [window.location.origin]
    });
  });
</script>
<reaction-video
  src="https://cdn.example.com/demo.mp4"
  overlays="tap,poll,rating,slider,cta"
  interaction-type="tap"
  cta-text="Continue"
  poll-question="Ready for the next step?"
></reaction-video>

ReactifySDK (optional): recorded reactions & threads

Load reactify.js when you need recorded video reactions, reactify-video, reactify-thread, or creator uploads—not for overlay-only engagement (those stay ReactionSDK on reaction-video).

<script src="https://reactify-cdn.s3.us-east-2.amazonaws.com/reactify.js" defer></script>
<!-- After overlays are live, load reactify.js for recorded video reactions: reactify-video, reactify-thread, and thread embeds. Same init pattern via reactionSDK or Reactify. -->

Google Tag Manager

If the host strips inline scripts or enforces strict CSP, load the SDK via Google Tag Manager and fire init on the appropriate trigger.

Verify

  1. Open the SDK playground with WooCommerce context.
  2. Confirm the network tab shows sdk.js (and reactify.js only if you added the expansion bundle) without CSP errors.
  3. Exercise tap, poll, rating, slider, and CTA in the playground or on your published page; confirm events in your ReactionSaaS dashboard.

Troubleshooting

  • CSP blocks script — Use GTM, ask the host for allowlisting, or move init to a tag the host already permits.
  • Double init / duplicate events — Ensure the loader appears once per page (not in header and footer).
  • 403 on API — Add the exact published origin (including www vs apex) to allowed domains.

FAQ

Is there a native WooCommerce app? No — the supported path is script + custom elements, same as other funnel and CMS hosts.

ReactionSDK vs ReactifySDK? ReactionSDK means on-video overlays (tap, poll, rating, slider, and CTA) on the reaction-video element via sdk.js—it is not viewer-recorded video reactions. ReactifySDK (reactify.js) is for recording reaction videos, threads, split-screen, and thread-style UGC. Use overlays first for low-friction signals; add ReactifySDK when you want camera-based participation or social proof clips.

← WooCommerce overview · Templates · WordPress / plugin guide