Incorpore Pesquisas no Seu Site

Visão Geral

1. Ative a incorporação nas configurações do canal
2. Crie um iframe na sua página e carregue o URL do canal
3. Ouça a mensagem ‘survey-ready’ para exibir o iframe
4. Ouça a mensagem ‘survey-completed’ para ocultar o iframe

Informações que você pode incluir no URL (opcional)

As configurações abaixo podem ser adicionadas ao URL do canal como parâmetros de pesquisa

Parâmetro	Valores	Descrição
language	en, et, de, fr	Código do idioma. O padrão é inglês internacional
theme	light, dark	Preferência de tema. O padrão é a preferência do navegador
transparent	true, false	Fundo transparente. O padrão é false
payload	string	Consulte a documentação de links seguros para mais informações

Mensagens que estamos prontos para receber

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

Mensagens que estamos enviando

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

---

Exemplo de Implementação em 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();

    // Manipula as mensagens do 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);
        }
    }, []);

    // Escuta as mensagens do iframe
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Exemplo de como enviar uma mensagem para o 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>
    );
}