Enquêtes insluiten op je website

Overzicht

1. Schakel insluiten in bij de kanaalinstellingen
2. Maak een iframe op je pagina en laad de kanaal-URL
3. Luister naar het ‘survey-ready’ bericht om het iframe te tonen
4. Luister naar het ‘survey-completed’ bericht om het iframe te verbergen

Informatie die je kunt opnemen in de URL (optioneel)

Onderstaande instellingen kunnen als zoekparameters aan de kanaal-URL worden toegevoegd.

Parameter	Waarden	Beschrijving
language	en, et, de, fr	Taalcode. Standaard is internationaal Engels.
theme	light, dark	Themavoorkeur. Standaard wordt de browservoorkeur gebruikt.
transparent	true, false	Transparante achtergrond. Standaard is false.
payload	string	Zie de documentatie over veilige links voor meer info

Berichten die we kunnen ontvangen

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

Berichten die we verzenden

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

---

React-implementatievoorbeeld

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();

    // Behandel berichten van het iframe
    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);
        }
    }, []);

    // Luister naar berichten van het iframe
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Voorbeeld van hoe je een bericht naar het iframe stuurt
    useEffect(() => {
        if (surveyRef.current) {
            surveyRef.current.contentWindow?.postMessage({ message: "theme-change", 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>
    );
}