Fella kannanir inn á vefsíðuna þína

Yfirlit

1. Virkjaðu innfellingu í stillingum rásar
2. Búðu til iframe á síðunni þinni og hladdu vefslóð rásarinnar
3. Hlustaðu eftir ‘survey-ready’ skilaboðunum til að birta iframe-rammann
4. Hlustaðu eftir ‘survey-completed’ skilaboðunum til að fela iframe-rammann

Upplýsingar sem hægt er að bæta við vefslóðina (valkvætt)

Hægt er að bæta neðangreindum stillingum við vefslóð rásarinnar sem leitarfæribreytur.

Færibreyta	Gildi	Lýsing
language	en, et, de, fr	Tungumálakóði. Sjálfgefið er alþjóðleg enska
theme	light, dark	Þemastilling. Sjálfgefið er stilling vafra
transparent	true, false	Gagnsær bakgrunnur. Sjálfgefið er false
payload	string	Sjá skjölun um örugga tengla fyrir frekari upplýsingar

Skilaboð sem við erum tilbúin að taka við

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

Skilaboð sem við sendum

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

---

Dæmi um útfærslu í 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();

    // Meðhöndla skilaboð frá 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);
        }
    }, []);

    // Hlusta eftir skilaboðum frá iframe
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Dæmi um hvernig á að senda skilaboð til iframe
    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>
    );
}