Embed a quiz on your site

1. Publish the quiz

A quiz only shows on a website once it's published. In your quiz, Questions tab, click Publish. In the Settings tab, Distribution section, check that the quiz is played “On my site only” (or “On my site and on Meletia”).

2. Copy the embed code

Sharing and embedding tab, Copy the code button. The code looks like this, with your quiz's identifier:

<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>

The first line shows the quiz; the second adjusts its height to its content, so there's no scroll bar. Keep both.

3. Paste it into your site

Site built with an AI (Lovable, Bolt, v0, Replit, Cursor…)

Give this text to the AI, replacing the parts in brackets. In your quiz's Sharing tab, the Copy the instructions for an AI button gives the same text with your code already in it.

Add a Meletia quiz to the [PAGE NAME] page, at [WHERE THE QUIZ SHOULD APPEAR].

Here is the embed code provided by 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>

Instructions:
- Keep the iframe address (src) and the script exactly as they are, without changing them.
- The iframe should take the full available width; its height is adjusted automatically by the script.
- If the site uses React (or Next.js, Vue…), write the iframe in the component (style as an object in JSX) and load the embed.js script once when the page loads, by adding it to the document (a <script> tag written directly in JSX would not run).
- Do not add a sandbox attribute to the iframe.

If you edit a React site yourself, here is the equivalent as a component:

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

In the page editor, add a Custom HTML block and paste the code into it. With a page builder (Elementor, Divi…), use its “HTML” or “Code” element.

Wix

Add, then Embed Code, then Embed HTML. Paste the code into the “Code” field. Wix puts the quiz in a fixed-height frame: make that frame taller in the editor so the whole quiz is visible.

Squarespace, Webflow, Shopify, Google Sites

• Squarespace: Code block, HTML mode.
• Webflow: Code Embed element.
• Shopify: in a page, the text editor's Show HTML (<>) button, or a theme “Custom HTML” section.
• Google Sites: Insert, Embed, Embed code tab.

No website, or a tool that doesn't accept code

Share the share link (same tab): the quiz is played on a Meletia page. It also works on social networks, in an email or in Notion (/embed command).

4. Restrict the quiz to your site

By default, the code works on any website. To show it only on yours, add your domain in Allowed sites (Sharing tab), for example mysite.com. Subdomains are included.

It doesn't show up?

• “This quiz doesn't exist or is no longer published”: publish the quiz (step 1).
• “This quiz can't be displayed on this site”: add your site's domain to Allowed sites, or empty the list. Also check that the distribution isn't “On Meletia only”.
• The quiz is cut off or leaves a big gap: the second line (the embed.js script) is missing or doesn't run. In a React site, use the component above.
• A blank area instead of the quiz: the tool may have removed the iframe or added a sandbox attribute. Paste the code again as is.

To save players' results in your own database, continue with Get results.