Incrusta encuestas en tu sitio web

Resumen

1. Habilita la incrustación en la configuración del canal
2. Crea un iframe en tu página y carga la URL del canal
3. Escucha el mensaje ‘survey-ready’ para mostrar el iframe
4. Escucha el mensaje ‘survey-completed’ para ocultar el iframe

Información que puedes incluir en la URL (opcional)

Los siguientes ajustes se pueden añadir a la URL del canal como parámetros de búsqueda

Parámetro	Valores	Descripción
language	en, et, de, fr	Código de idioma. Por defecto es inglés internacional
theme	light, dark	Preferencia de tema. Por defecto es la preferencia del navegador
transparent	true, false	Fondo transparente. Por defecto es false
payload	string	Consulta la documentación de enlaces seguros para más información

Mensajes que estamos listos para recibir

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

Mensajes que estamos enviando

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

---

Ejemplo de implementación en 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();

    // Manejar mensajes del 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);
        }
    }, []);

    // Escuchar mensajes del iframe
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Ejemplo de cómo enviar un mensaje al iframe
    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>
    );
}