Embedding Quizzes on Your Website: A Developer's Guide

A technical guide to embedding Quizimoto quizzes on any website — from basic script tags to advanced API integrations.

Get a Quiz Running in 30 Seconds

Quizimoto embeds are designed to work anywhere — static HTML sites, React apps, WordPress, Shopify, or any platform that supports custom HTML. The embed runtime uses Shadow DOM isolation, so your site's CSS never conflicts with the quiz and vice versa.

The simplest integration is a single script tag. Let's start there, then explore advanced options.

1<!-- Basic inline embed -->
2<div data-quizimoto-embed="your-embed-key"></div>
3<script src="https://embed.quizimoto.com/loader.js" async></script>
4
5<!-- Popup mode (opens on button click) -->
6<button data-quizimoto-embed="your-embed-key"
7        data-quizimoto-mode="popup">
8  Take the Quiz
9</button>
10<script src="https://embed.quizimoto.com/loader.js" async></script>
11
12<!-- Slide-in from right (triggered after 5s delay) -->
13<div data-quizimoto-embed="your-embed-key"
14     data-quizimoto-mode="slide_in"
15     data-quizimoto-trigger="delay"
16     data-quizimoto-delay="5000"
17     data-quizimoto-position="right"></div>
18<script src="https://embed.quizimoto.com/loader.js" async></script>

Display Modes

Quizimoto supports five display modes, each suited to different use cases:

Mode	Description	Best For
`inline`	Renders in place within your page flow	Blog posts, landing pages
`popup`	Centered overlay with backdrop	CTAs, exit intent
`slide_in`	Slides in from left or right edge	Engagement prompts
`fullscreen`	Takes over the entire viewport	Immersive experiences
`launcher`	Floating button that opens the quiz	Persistent availability

Trigger Types

For popup, slide-in, and fullscreen modes, you can control when the quiz appears:

click — Opens when the user clicks the element
immediate — Opens as soon as the page loads
delay — Opens after a specified delay in milliseconds
scroll — Opens when the user scrolls past a percentage of the page
exit_intent — Opens when the cursor moves toward the browser chrome
url_param — Opens when a specific URL parameter is present

Programmatic Control

The embed runtime exposes a JavaScript API for full programmatic control:

1// Wait for the embed runtime to load
2window.addEventListener('quizimoto:ready', () => {
3  const quiz = window.Quizimoto.get('your-embed-key')
4
5  // Show or hide programmatically
6  quiz.show()
7  quiz.hide()
8
9  // Listen for events
10  quiz.on('submission', (data) => {
11    console.log('Quiz completed:', data.score, data.responses)
12    // Send to your analytics, CRM, etc.
13  })
14
15  quiz.on('lead', (data) => {
16    console.log('Lead captured:', data.email)
17  })
18})

Shadow DOM Isolation

Quizimoto renders inside a Shadow DOM root. This means your page's CSS cannot style the quiz, and the quiz's CSS cannot leak into your page. If you need custom styling, use the Visual Customization settings in the quiz builder — not external CSS.

Ready to embed your first quiz?

Create a quiz, grab your embed key, and paste one line of code. It really is that simple.