React installation (ReactionSDK)

// ReactionSdkLoader.tsx — client-only
import { useEffect } from "react";

const SRC = "https://reactify-cdn.s3.us-east-2.amazonaws.com/sdk.js?v=2.0.8";
const APP_BASE = "https://api.reactionsaas.com";

declare global {
  interface Window {
    Reactify?: {
      init: (opts: {
        apiKey: string;
        accountId?: string;
        baseUrl?: string;
        mode?: "production" | "debug";
        allowedOrigins?: string[];
      }) => void;
    };
  }
}

export function ReactionSdkLoader(props: {
  apiKey?: string;
  accountId?: string;
}) {
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (document.querySelector(`script[src="${SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = SRC;
    s.async = true;
    s.onload = () => {
      if (!props.apiKey?.trim()) return; // zero-config demo path
      window.Reactify?.init?.({
        apiKey: props.apiKey.trim(),
        accountId: props.accountId,
        baseUrl: APP_BASE,
        mode: "production",
        allowedOrigins: [window.location.origin],
      });
    };
    document.body.appendChild(s);
  }, [props.apiKey, props.accountId]);
  return null;
}

import { ReactionSdkLoader } from "./ReactionSdkLoader";

export function ProductVideo() {
  const apiKey = process.env.REACT_APP_REACTION_API_KEY ?? "";
  const accountId = process.env.REACT_APP_REACTION_ACCOUNT_ID ?? "";

  return (
    <>
      <ReactionSdkLoader apiKey={apiKey} accountId={accountId} />
      {/* @ts-expect-error custom element */}
      <reaction-video
        src="https://yourcdn.com/video.mp4"
        overlays="tap,poll,slider,rating"
        poll-question="Which style do you prefer?"
        cta-text="Buy Now"
        overlay-position="bottom-center"
        interaction-type="tap"
      />
    </>
  );
}