Your
Opinion.is

Umfrage auf Ihrer eigenen Website einbetten

Grober Ablauf

  1. Aktivieren Sie die Einbettung in den Kanaleinstellungen
  2. Erstellen Sie einen iframe auf Ihrer Seite und laden Sie die Kanal-URL
  3. Warten Sie auf eine Post Message mit dem Ladestatus der Umfrage und entscheiden Sie, ob Sie den iframe anzeigen möchten oder nicht
  4. Wenn der Benutzer das Formular abgeschlossen hat, erhalten Sie eine weitere Post Message, damit Sie den iframe ausblenden können

Informationen, die Sie in die URL einfügen können (optional)

Die folgenden Einstellungen können der Kanal-URL als Suchparameter hinzugefügt werden

ParameterWerteBeschreibung
languageen, et, de, frWenn nicht angegeben, wird standardmäßig internationales Englisch verwendet
themelight, darkWenn nicht angegeben, wird die Browser-Einstellung des Benutzers berücksichtigt
transparenttrue, falseWenn wahr (true), wird der Seitenhintergrund transparent
payloadstringWeitere Informationen finden Sie in der Dokumentation zu sicheren Links

Nachrichten, die wir empfangen können

{
    "message": "theme-change",
    "theme": "light" // "light", "dark"
}

Nachrichten, die wir senden

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

Vereinfachtes Beispiel für React

import { cn } from "@workspace/ui/lib/utils";
import { useCallback, useEffect, useRef, useState } from "react";
import * as v from "valibot";

const PostMessages = v.variant("message", [
    v.object({
        message: v.literal("survey-ready"),
    }),
    v.object({
        message: v.literal("survey-completed"),
    }),
]);

export function EmbeddedWidget() {
    const [visible, setVisible] = useState(false);
    const surveyRef = useRef<HTMLIFrameElement>(null);
    const theme = useTheme();

    // Nachrichten vom iframe verarbeiten
    const handlePostMessage = useCallback((event: MessageEvent) => {
        if (event.origin !== "https://youropinion.is") {
            return null;
        }

        const message = v.parse(PostMessages, event.data);

        if (message.message === "survey-ready") {
            setVisible(true);
        } else if (message.message === "survey-completed") {
            setVisible(false);
        }
    }, []);

    // Auf Nachrichten vom iframe lauschen
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

        return () => {
            window.removeEventListener("message", handlePostMessage);
        };
    }, []);

    // Beispiel, wie eine Nachricht an den iframe gesendet wird
    useEffect(() => {
        if (surveyRef.current) {
            surveyRef.current.contentWindow?.postMessage({ message: "change-theme", theme }, "*");
        }
    }, [theme]);

    return (
        <div
            className={cn(
                "h-[400px] w-[400px] fixed right-24 bottom-24 opacity-0 transition-opacity duration-1000",
                {
                    "opacity-100": visible,
                }
            )}
        >
            <iframe
                src={`https://youropinion.is/snap/xxx/c/yyy?theme=${theme}&transparent=true`}
                className="w-full h-full"
                ref={surveyRef}
            />
        </div>
    );
}