Lisa küsitlus oma kodulehele

Ülevaade

1. Luba manustamine kanali seadetes
2. Loo oma lehel iframe ja lae sinna kanali URL
3. Kuula ‘survey-ready’ sõnumit, et iframe nähtavaks muuta
4. Kuula ‘survey-completed’ sõnumit, et iframe peita

URL-i lisatav teave (valikuline)

Alltoodud seaded saab lisada kanali URL-ile otsinguparameetritena.

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

    // Käsitle iframe'ist tulevaid sõnumeid
    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);
        }
    }, []);

    // Kuula iframe'ist tulevaid sõnumeid
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Näide, kuidas saata sõnumit iframe'i
    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://share.youropinion.is/#/xxx/yyy?theme=${theme}&transparent=true`}
                className="w-full h-full"
                ref={surveyRef}
            />
        </div>
    );
}