Embed Widget

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 embed snippet
• 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 embed snippet 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 Interface settings 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 data-quizflow-chat-position, data-quizflow-chat-text, and data-quizflow-primary-color, mirroring the saved bubble alignment, label, and color on your site. 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>

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 a floating bubble anchored to the left or right edge to match your Positioning setting.

Step-by-step

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

Tips / Gotchas

• The embed needs a published quiz and a valid slug.
• Full-Page overlays require a paid plan and the snippet automatically adds data-quizflow-mode="fullpage" to lock the iframe and prevent host scrolling.
• Chatbot mode adds data-quizflow-chat-position, data-quizflow-chat-text, and data-quizflow-primary-color so the floating bubble matches the saved alignment, label, and color.
• Use Show border in Interface settings to add a subtle frame when you stay in widget style.
• The script auto-resizes the iframe based on content height.