Embed a quiz: block, shortcode and iFrame

You can place a quiz on any page in three ways: a Gutenberg block, a shortcode, or an iFrame. The quiz must be Published for any of them to show anything.

Before you embed

New quizzes are created as Published, so they are ready straight away. Quizzes you duplicate or import start as Draft. A draft or archived quiz renders nothing on your site.

To check or change the status:

1. Go to Quiz Builder, then All Quizzes.
2. Open the row menu for the quiz.
3. Choose Publish (or Set to draft to hide it).

Find the quiz ID and embed code

The Summary tab is the only place in the admin that shows embed code.

1. Open the quiz in the builder.
2. Go to the last tab, Summary. You can reach it with Next from the Settings tab.
3. Use the cards on the page. Each has a Copy button that changes to Copied! for two seconds.

Card	Hint shown	What it contains
Shortcode	Paste into any WordPress page, post, or widget	[quizably_quiz id="<ID>"]
iFrame embed	Embed on any external website or landing page	An <iframe> snippet
Popup shortcode	Opens the quiz in a centered modal overlay	[quizably_quiz_popup id="<ID>"]
Slide-in shortcode	A button in the corner that opens the quiz in a small panel	[quizably_quiz_slidein id="<ID>"]

The popup and slide-in shortcodes can also open by themselves after a delay, on scroll or on exit intent. See Popup and slide-in embeds.

Note: The Summary tab always says the quiz “is published and live”, even if it is a draft. Check the status in All Quizzes.

You can also read the numeric ID from the address bar while the builder is open. The URL ends in #/quiz/<ID>/summary.

The Gutenberg block

1. Edit a page or post in the block editor.
2. Select the plus button and search for Advance Quiz. It is in the Widgets category. You can also search for “quiz”, “quizably” or “form”.
3. Insert the block.
4. In the block sidebar, open the Quiz panel.
5. Under Choose quiz, pick your quiz from the dropdown. The first option is - Select a quiz -.
6. Optional: turn on Auto-start on load (“Skip the intro screen and go straight to the first question.”).
7. Update or publish the page.

The dropdown lists up to 100 quizzes, newest first, by title. It includes drafts, so check the status of the quiz you pick.

In the editor, the block does not show a live preview. It shows a line of text: “Choose a quiz in the block settings.” until you pick one, and “Advance Quiz (rendered on the frontend)” with the quiz ID afterward. Open the page on your site to see the real quiz.

If you publish the page without choosing a quiz, visitors see the text “Choose a quiz in the block settings.” Always pick a quiz before publishing.

The shortcode

Paste this into a Shortcode block, a classic editor, or a widget that supports shortcodes:

[quizably_quiz id="123"]

Attribute	Required	Description
id	Yes	The numeric quiz ID from the Summary tab, or the quiz UUID.
autostart	No	Set to 1 (also true, yes or on) to skip the intro screen and start at the first question.

The shortcode prints nothing if the ID is empty, the quiz does not exist, or the quiz is not published. Visitors with JavaScript turned off see “This quiz requires JavaScript.”

Auto-start does not skip the “Resume where you left off?” prompt. If a visitor has saved progress, they still see it first.

You can put more than one quiz on the same page. Each one runs on its own.

Show a saved result on a page

There is also a [quizably_quiz_result] shortcode. It takes no attributes. It reads a submission ID from a web address of the form ?quizably_result=<submission id> and prints a result card with the quiz title, the result and a score line. If the ID is missing or unknown it prints “Result not found.”

Quizably does not create these links for you. The share buttons on a result screen point at the page the visitor was on. Use this shortcode only if you build the links yourself, for example from an automation.

The iFrame embed

Use the iFrame when the quiz has to appear on a site that is not your WordPress site, or in a tool that only accepts HTML.

1. Copy the iFrame embed snippet from the Summary tab.
2. Paste it into the page where you want the quiz.

The snippet looks like this:

<iframe src="https://your-site.com/?quizably_embed=123" width="100%" height="600" frameborder="0" allowtransparency="true" style="border:none;max-width:100%"></iframe>

The iFrame loads a bare page from your WordPress site, without your theme header or footer. Your site must stay online for the embed to work. The page is marked noindex, so search engines will not list it.

Two optional settings can be added to the address:

Parameter	Example	Effect
max_width	max_width=900px	Limits the width. Accepts px, em, rem, vw, ch and %. none removes the limit.
bg	bg=f5f5f5	Sets the page background. Use a hex colour without the #.

The iFrame does not resize itself. If your quiz is taller than 600 pixels, change the height value.

Where shortcodes work

Shortcodes work in any place WordPress processes them: pages, posts, Shortcode blocks, text widgets and most page builders that have a shortcode element. They do not work inside places that print text without processing it, such as a plain HTML field in some themes or a post title. If you see the raw text in brackets on the live page, use the block instead.

Quizably loads its scripts and styles only on pages that contain a quiz, so other pages are not slowed down.

Caching plugins

• Page caches store the quiz content inside the cached page. After you edit a quiz, clear the cache or visitors may see the old version.
• Quiz submissions and answers are saved through separate requests, so they still record on cached pages.
• Do not block or cache the /wp-json/quizably/ routes in a security plugin, firewall or CDN rule. The quiz needs them to save answers and show results.
• Optimization plugins that delay or combine JavaScript can stop a quiz from starting. The quiz script loads as a module. If the quiz shows but does not respond, exclude it from minify, combine and delay settings.

Related

• Quickstart: build your first quiz
• Design and backgrounds
• Analytics
• Troubleshooting