Intégrer un quiz sur votre site

1. Publier le quiz

Un quiz ne s'affiche sur un site qu'une fois publié. Dans votre quiz, onglet Questions, cliquez sur Publier. Dans l'onglet Réglages, rubrique Diffusion, vérifiez que le quiz se joue « Sur mon site uniquement » ou « Sur mon site et sur Meletia ».

2. Copier le code d'intégration

Onglet Partage et intégration, bouton Copier le code. Le code ressemble à ceci, avec l'identifiant de votre quiz :

<iframe src="https://embed.meletia.fr/?quiz=8f3c2a71-0000-4000-8000-000000000000" title="Quiz : Capitales du monde" style="width:100%;height:480px;border:0" loading="lazy"></iframe>
<script src="https://embed.meletia.fr/embed.js" async></script>

La première ligne affiche le quiz ; la seconde ajuste sa hauteur à son contenu, pour éviter une barre de défilement. Gardez les deux.

3. Le coller sur votre site

Site créé avec une IA (Lovable, Bolt, v0, Replit, Cursor…)

Donnez ce texte à l'IA, en remplaçant les passages entre crochets. Dans l'onglet Partage de votre quiz, le bouton Copier la consigne pour une IA donne le même texte avec votre code déjà inséré.

Ajoute un quiz Meletia sur la page [NOM DE LA PAGE], à l'endroit [OÙ LE QUIZ DOIT APPARAÎTRE].

Voici le code d'intégration fourni par Meletia :

<iframe src="https://embed.meletia.fr/?quiz=8f3c2a71-0000-4000-8000-000000000000" title="Quiz : Capitales du monde" style="width:100%;height:480px;border:0" loading="lazy"></iframe>
<script src="https://embed.meletia.fr/embed.js" async></script>

Consignes :
- Garde l'adresse de l'iframe (src) et le script exactement tels quels, sans les modifier.
- L'iframe doit prendre toute la largeur disponible ; sa hauteur est ajustée automatiquement par le script.
- Si le site est en React (ou Next.js, Vue…), écris l'iframe dans le composant (style en objet en JSX) et charge le script embed.js une seule fois au chargement de la page, en l'ajoutant au document (une balise <script> écrite directement en JSX ne s'exécuterait pas).
- N'ajoute pas d'attribut sandbox à l'iframe.

Si vous modifiez le code vous-même dans un site React, voici l'équivalent sous forme de composant :

import { useEffect } from "react";

export function MeletiaQuiz() {
  useEffect(() => {
    if (document.querySelector("script[data-meletia]")) return;
    const script = document.createElement("script");
    script.src = "https://embed.meletia.fr/embed.js";
    script.async = true;
    script.dataset.meletia = "";
    document.body.appendChild(script);
  }, []);

  return (
    <iframe
      src="https://embed.meletia.fr/?quiz=8f3c2a71-0000-4000-8000-000000000000"
      title="Quiz : Capitales du monde"
      style={{ width: "100%", height: 480, border: 0 }}
      loading="lazy"
    />
  );
}

WordPress

Dans l'éditeur de la page, ajoutez un bloc HTML personnalisé et collez-y le code. Avec un constructeur de pages (Elementor, Divi…), utilisez son élément « HTML » ou « Code ».

Wix

Ajouter, puis Intégrer du code, puis Intégrer HTML. Collez le code dans le champ « Code ». Wix place le quiz dans un cadre de hauteur fixe : agrandissez ce cadre dans l'éditeur pour que le quiz soit entièrement visible.

Squarespace, Webflow, Shopify, Google Sites

• Squarespace : bloc Code, mode HTML.
• Webflow : élément Code Embed.
• Shopify : dans une page, bouton Afficher le HTML (<>) de l'éditeur de texte, ou une section « HTML personnalisé » du thème.
• Google Sites : Insérer, Intégrer, onglet Code d'intégration.

Pas de site, ou un outil qui n'accepte pas de code

Partagez le lien de partage (même onglet) : le quiz se joue sur une page Meletia. Il fonctionne aussi sur les réseaux sociaux, dans un e-mail ou dans Notion (commande /embed).

4. Réserver le quiz à votre site

Par défaut, le code fonctionne sur n'importe quel site. Pour qu'il ne s'affiche que chez vous, indiquez votre domaine dans Sites autorisés (onglet Partage), par exemple monsite.fr. Les sous-domaines sont inclus.

Ça ne s'affiche pas ?

• « Ce quiz n'existe pas ou n'est plus publié » : publiez le quiz (étape 1).
• « Ce quiz ne peut pas être affiché sur ce site » : ajoutez le domaine de votre site dans Sites autorisés, ou videz la liste. Vérifiez aussi que la diffusion n'est pas « Sur Meletia uniquement ».
• Le quiz est coupé ou laisse un grand vide : la seconde ligne (le script embed.js) manque ou n'est pas exécutée. Dans un site React, utilisez le composant ci-dessus.
• Une page blanche à la place du quiz : l'outil a peut-être retiré l'iframe ou ajouté un attribut sandbox. Recollez le code tel quel.

Pour enregistrer les résultats des joueurs dans votre propre base, passez au guide Récupérer les résultats.