Umfragen auf Ihrer Website einbetten

Überblick

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 die ‘survey-ready’-Nachricht, um den iframe anzuzeigen
4. Warten Sie auf die ‘survey-completed’-Nachricht, um den iframe auszublenden

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

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

Parameter	Werte	Beschreibung
language	en, et, de, fr	Sprachcode. Standard ist internationales Englisch.
theme	light, dark	Design-Einstellung. Standard ist die Browser-Einstellung.
transparent	true, false	Transparenter Hintergrund. Standard ist false.
payload	string	Weitere 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"
}

---

Beispiel für eine React-Implementierung

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 hören
    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>
    );
}