Lisa küsitlus oma kodulehele

Ülevaade

1. Luba manustamine kanali seadetes
2. Loo oma lehel iframe ja lae sinna kanali URL
3. Oota PostMessage teadet küsitluse laadimise olekuga ja otsusta, kas soovid iframe’i näidata või mitte
4. Kui kasutaja on vormi täitnud, saad teise PostMessage teate, et saaksid iframe’i peita

URL-i lisatav teave (valikuline)

Alltoodud seaded saab lisada kanali URL-ile otsingu parameetritena.

Parameeter	Väärtused	Kirjeldus
language	en, et, de, fr	Keelekood. Vaikimisi on rahvusvaheline inglise keel.
theme	light, dark	Kujunduse eelistus. Vaikimisi kasutatakse brauseri eelistust.
transparent	true, false	Läbipaistev taust. Vaikimisi on false.
payload	string	Lisateabe saamiseks vaadake turvaliste linkide dokumentatsiooni

Sõnumid, mida oleme valmis vastu võtma

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

Sõnumid, mida me saadame

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

---

Reacti implementatsiooni näide

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

    // Iframe'ist tulevate sõnumite käsitlemine
    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);
        }
    }, []);

    // Iframe'ist tulevate sõnumite kuulamine
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Näide, kuidas saata sõnum iframe'i
    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>
    );
}