Intégrer des sondages sur votre site web

Aperçu

1. Activez l’intégration dans les paramètres du canal.
2. Créez une iframe sur votre page et chargez l’URL du canal.
3. Écoutez le message ‘survey-ready’ pour afficher l’iframe.
4. Écoutez le message ‘survey-completed’ pour masquer l’iframe.

Informations que vous pouvez inclure dans l’URL (facultatif)

Les paramètres ci-dessous peuvent être ajoutés à l’URL du canal en tant que paramètres de recherche.

Paramètre	Valeurs	Description
language	en, et, de, fr	Code de langue. La valeur par défaut est l’anglais international.
theme	light, dark	Préférence de thème. La valeur par défaut est la préférence du navigateur.
transparent	true, false	Arrière-plan transparent. La valeur par défaut est false.
payload	string	Voir la documentation sur les liens sécurisés pour plus d’informations

Messages que nous pouvons recevoir

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

Messages que nous envoyons

{
    "message": "survey-ready"
}

{
    "message": "survey-completed"
}

---

Exemple d’implémentation avec 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();

    // Gérer les messages provenant de l'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);
        }
    }, []);

    // Écouter les messages provenant de l'iframe
    useEffect(() => {
        window.addEventListener("message", handlePostMessage);

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

    // Exemple d'envoi d'un message à l'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>
    );
}