See the story behind every answer

Drop this snippet inside any React component to render your RapidoForm with the Video Question enabled. Replace the placeholder IDs with live values.

import { useEffect, useRef } from "react";

export const RapidoFormVideoQuestion = () => {
  const iframeRef = useRef(null);
  useEffect(() => {
    const handleEmbedEvents = (event) => {
      if (!event.data) return;
      if (event.data.type === "video-uploaded") {
        fetch("/api/webhooks/rapidoform", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            event: "video-uploaded",
            payload: event.data.payload,
          }),
        });
      }

      if (event.data.type === "response-submitted") {
        console.log("Response submitted", event.data.payload);
      }
    };

    window.addEventListener("message", handleEmbedEvents);
    return () => window.removeEventListener("message", handleEmbedEvents);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      title="RapidoForm Video Question"
      src={"https://app.rapidoform.com/forms/FORM_ID?videoQuestionId=QUESTION_ID"}
      allow="camera; microphone"
      className="video-question-embed"
    />
  );
};

// Alternative script embed if you prefer:
// <script src="https://cdn.rapidoform.com/embed.js" data-form-id="FORM_ID"></script>
// window.RapidoForm?.init({ apiKey: "API_KEY", formId: "FORM_ID" });