Embed Widget

Published July 25, 2026

Use the embed widget to place a quiz inline on any page of your website.

This guide will walk you through:

• Where to get the Installation Code
• How the script works
• Common embed troubleshooting tips

When to use this

Use embeds when you want the quiz to live inside your existing site layout.

How it works

The Installation Code injects the quiz by targeting <div data-quizflow-embed="{slug}"> and loading /embed.js from the same origin as your workspace. Selecting a Public view style in Appearance automatically adds data-quizflow-mode="fullpage" when you choose Full-Page or data-quizflow-mode="chat" when the Chatbot style is active. The Chatbot experience also injects launcher attributes for the selected mode, label, icon, position, notification, preview text, and primary color so the launcher matches what you designed in Appearance. You can still add data-quizflow-mode="fullpage" or "chat" manually if you want to force an overlay without switching the saved presentation style.

<div data-quizflow-embed="your-slug"></div>
<script async src="https://www.quizflowlabs.com/embed.js"></script>

Compact footer or sidebar placement:

<div data-quizflow-embed="your-slug" data-quizflow-layout="compact"></div>
<script async src="https://www.quizflowlabs.com/embed.js"></script>

Compact placement starts with a small inline frame and then resizes to the rendered content height after load. It is intended for lightweight CTAs, rating buttons, footer widgets, and sidebar placements, typically around 120-180px tall depending on your content and branding footer. You can also use data-quizflow-mode="compact" for the same sizing behavior.

Full-page overlay:

<div data-quizflow-embed="your-slug" data-quizflow-mode="fullpage"></div>
<script async src="https://www.quizflowlabs.com/embed.js"></script>

Full-page mode fixes the iframe to the viewport, disables background scrolling, and removes any host-page gap beneath the quiz.

When the Chatbot public style is selected, the widget renders as the saved launcher. Popover launchers can anchor to the left or right edge; button launchers render as a direct call to action.

Step-by-step

1. Select a Public view style under Appearance > Presentation (widget, full page, or chatbot).
2. If you chose Full-Page, configure layout, question alignment, and split media before copying Installation Code.
3. Go to Finish & Publish and copy the Installation Code once your quiz has a slug; it auto-includes the required data-quizflow-mode and launcher attributes for your chosen style.
4. Use the Open embed preview button to confirm the experience, then paste the Installation Code before the closing </body> tag.
5. Publish or re-publish the quiz so the embed can load with the latest Appearance.

Tips / Gotchas

• The embed needs a published quiz and a valid slug.
• Full-Page overlays require Basic+ and Installation Code automatically adds data-quizflow-mode="fullpage" to lock the iframe and prevent host scrolling.
• Chatbot mode adds launcher attributes so the button or popover matches the saved label, icon, alignment, notification, preview text, and primary color.
• Add data-quizflow-layout="compact" for footer, sidebar, or button-style placements that should shrink-wrap tightly around the visible content.
• Use Show border in Appearance to add a subtle frame when you stay in widget style.
• The script auto-resizes the iframe based on content height.