Embeds

Embed interactive quizzes on any website. Choose between a lightweight script tag integration or a simple iFrame embed for maximum compatibility.

Embed Methods

QuizAPI offers two ways to embed quizzes. The script tag method gives you full control over styling and events, while the iFrame method works anywhere with zero configuration.

Script Tag Embed

Recommended

The script tag method renders the quiz directly in your page. This gives you access to the JavaScript API for event handling and full control over the styling.

html

<!-- Add this where you want the quiz to appear -->
<div id="quizapi-embed" data-quiz-id="QUIZ_ID"></div>

<!-- Include the QuizAPI embed script -->
<script src="https://quizapi.io/embed.js"></script>

Configuration Options

Customize the embedded quiz using data attributes on the container element. These options apply to the script tag embed method.

Attribute	Type	Default	Description
`data-quiz-id`Required	string	-	The unique ID of the quiz to embed
`data-theme`	string	auto	Color theme: `light`, `dark`, or `auto` (matches user preference)
`data-color`	string	#6366f1	Accent color as a hex value (e.g., `#6366f1`)
`data-show-leaderboard`	boolean	false	Whether to show the leaderboard after quiz completion

Example with Options

html

<div
  id="quizapi-embed"
  data-quiz-id="quiz_abc123"
  data-theme="dark"
  data-color="#6366f1"
  data-show-leaderboard="true"
></div>

<script src="https://quizapi.io/embed.js"></script>

JavaScript API

The script tag embed dispatches custom events on the window object. Use these events to react to quiz interactions in your application.

Event	Payload	Description
`quizapi:ready`	-	Fired when the embed has fully loaded and is ready
`quizapi:complete`	`quizId, score, totalQuestions, timeSpent`	Fired when the user finishes the quiz
`quizapi:answer`	`questionId, selectedAnswer, isCorrect`	Fired each time the user submits an answer

Event Listener Example

html

<div id="quizapi-embed" data-quiz-id="quiz_abc123"></div>

<script src="https://quizapi.io/embed.js"></script>
<script>
  // Wait for the embed to initialize
  window.addEventListener("quizapi:ready", function () {
    console.log("Quiz embed is ready");
  });

  // Listen for quiz completion
  window.addEventListener("quizapi:complete", function (event) {
    const { quizId, score, totalQuestions, timeSpent } = event.detail;
    console.log("Quiz completed!", {
      quizId,
      score,
      totalQuestions,
      timeSpent,
    });

    // Example: send results to your analytics
    analytics.track("quiz_completed", event.detail);
  });

  // Listen for individual answer submissions
  window.addEventListener("quizapi:answer", function (event) {
    const { questionId, selectedAnswer, isCorrect } = event.detail;
    console.log("Answer submitted:", {
      questionId,
      selectedAnswer,
      isCorrect,
    });
  });
</script>

Full Integration Example

A complete example showing the script tag embed with configuration options, event listeners, and a results banner.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Quiz Page</title>
  <style>
    .quiz-container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    .results-banner {
      display: none;
      padding: 1rem;
      margin-top: 1rem;
      border-radius: 8px;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #166534;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <h1>JavaScript Fundamentals Quiz</h1>
    <p>Test your knowledge of JavaScript basics.</p>

    <div
      id="quizapi-embed"
      data-quiz-id="quiz_abc123"
      data-theme="auto"
      data-color="#6366f1"
      data-show-leaderboard="true"
    ></div>

    <div class="results-banner" id="results">
      You scored <strong id="score"></strong> out of
      <strong id="total"></strong>!
    </div>
  </div>

  <script src="https://quizapi.io/embed.js"></script>
  <script>
    window.addEventListener("quizapi:complete", function (event) {
      var results = document.getElementById("results");
      document.getElementById("score").textContent = event.detail.score;
      document.getElementById("total").textContent = event.detail.totalQuestions;
      results.style.display = "block";
    });
  </script>
</body>
</html>

Styling & Theming

The script tag embed supports CSS custom properties for fine-grained control over the quiz appearance. Override these variables on the container element to match your brand.

CSS Variable	Default	Description
`--quizapi-font-family`	system-ui	Font family for all quiz text
`--quizapi-border-radius`	8px	Border radius for cards and buttons
`--quizapi-primary-color`	#6366f1	Primary accent color for buttons and highlights
`--quizapi-background`	#ffffff	Background color of the quiz container
`--quizapi-text-color`	#1f2937	Main text color
`--quizapi-correct-color`	#22c55e	Color for correct answer indicators
`--quizapi-incorrect-color`	#ef4444	Color for incorrect answer indicators

css

/* Override embed styles with CSS custom properties */
#quizapi-embed {
  --quizapi-font-family: "Inter", sans-serif;
  --quizapi-border-radius: 12px;
  --quizapi-primary-color: #6366f1;
  --quizapi-background: #ffffff;
  --quizapi-text-color: #1f2937;
  --quizapi-border-color: #e5e7eb;
  --quizapi-correct-color: #22c55e;
  --quizapi-incorrect-color: #ef4444;
}