Hear the why behind every answer

Developer snippet

Drop an Audio Question into your product in minutes.

import { useEffect } from "react";

export function RapidoFormAudioQuestion() {
  useEffect(() => {
    const handleAudioUploaded = (event: CustomEvent) => {
      fetch("/api/webhook", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ type: "audio-uploaded", payload: event.detail })
      });
    };

    const handleResponseSubmitted = (event: CustomEvent) => {
      fetch("/api/webhook", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ type: "response-submitted", payload: event.detail })
      });
    };

    window.addEventListener("audio-uploaded", handleAudioUploaded as EventListener);
    window.addEventListener("response-submitted", handleResponseSubmitted as EventListener);

    return () => {
      window.removeEventListener("audio-uploaded", handleAudioUploaded as EventListener);
      window.removeEventListener("response-submitted", handleResponseSubmitted as EventListener);
    };
  }, []);

  return (
    <iframe
      title="RapidoForm Audio Question"
      src="https://app.rapidoform.com/forms/FORM_ID?questionId=QUESTION_ID"
      data-api-key="API_KEY"
      className="h-[640px] w-full rounded-3xl border"
      allow="microphone"
    />
  );
}

// Alternatively load the embed script when ready:
// <script src="https://cdn.rapidoform.com/embed.js" data-form="FORM_ID"></script>