Interface Settings

Interface settings is where you control the public experience of each quiz. You can tune its presentation style, experience mode, appearance, chat behavior, and install snippet from one screen.

This guide will walk you through:

• Choosing the Public view style for hosted pages and embeds.
• Adjusting Full-Page layout, question alignment, and split media selection from Media Library.
• Toggling Modality & Experience controls such as chat mode, auto-advance, running score, and transitions.
• Fine-tuning Appearance & Style (colors, header visibility, branding, navigation, and chat launcher text).
• Using the Installation panel to copy the snippet, export matching data attributes, and open the embed preview.

When to use this

Use Interface settings when you are ready to publish or embed your quiz and want the hosted or embedded experience to match your brand and tone.

Before you get started

1. Open Interface Settings from the quiz builder or quiz dashboard.
2. Pick a Public view style (widget, full page, or chatbot) and adjust any additional controls that appear.
3. Fine-tune colors, headers, branding, and chat launcher text under Appearance & Style.
4. After publish, copy the embed snippet from Installation or open the embed preview to verify the live result.

Public view style

The Public view style accordion lets you decide how the hosted quiz renders:

• Widget (the default) shows your quiz in a card-like frame that adapts to the page layout. Use the widget border toggle to add or remove the frame while keeping the rest of the page beneath it visible.
• Full-Page creates an immersive, single-card experience. It locks to the viewport, disables host-page scrolling, and inherits the Full-Page Settings you configure right below the selector. Full-Page presentation requires a paid plan, and the corresponding full-page embed also locks to the viewport (full-page embeds require the Pro plan).
• Chatbot lets the experience launch from a floating bubble. The public page and embeds use the same bubble to preserve the chatbot tone. When you publish with Chatbot view selected, the embed snippet adds data-quizflow-mode="chat" plus the chat position, text, and color attributes shown under Installation.

Full-Page Settings

Full-Page Settings replace the widget chrome when you choose the Full-Page style. Here is what you can modify:

• Layout: Pick Centered for a single-panel view or Split to add a static media column on large screens. Split layout requires a Pro plan and a media image so the extra column has content.
• Question alignment: Float the quiz panel toward the top, center, or bottom of the viewport on large screens.
• Media side and image: When layout = Split, choose whether the media panel sits left or right, then use Choose from library to select the image. If needed, upload a new JPG, PNG, or WebP file from the Media Library picker first (keep it under 3 MB after compression). This image acts as the default split media for the quiz. Recommended target: 1600 x 2000 px (4:5 portrait), with important content centered for responsive cover-cropping (minimum 1200 x 1500 px).
• Background image: In Appearance & Style, use Choose from library to set an optional quiz background image (paid plans).
• Question-level override support: In Block Settings, eligible question blocks can optionally override the default split media image for that step. If no block override exists, Interface Settings media is used.

The same settings also apply to hosted full-page URLs and full-page embeds, so updates appear instantly wherever your quiz is published.

Launcher & triggers

When Full-Page presentation is enabled, the Launcher & triggers controls let you keep the quiz collapsed behind a branded launcher until visitors are ready. Toggle the Full-page launcher to show a floating button or popover, then choose the mode (button for a compact badge, popover for a wider panel) and the text variant (icon, text, or text+icon) that fits your page. You can edit the label, pick a curated icon, nudge the border radius toward a pill or a square, and add a subtle animation plus a notification indicator (a dot or preview text) so the launch CTA stands out.

Decide whether the launcher lives on the left or right edge of the viewport, and pair it with a trigger: manual only, time on page (1‑3,600 seconds), scroll percentage (10‑90%), or exit intent. These triggers automatically open the full-page overlay while the embed snippet picks up the same configuration, so hosted URLs and full-page embeds stay in sync with the behavior you designed.

Modality & Experience

Use the Modality & Experience accordion to control how question slides feel:

• Experience mode: Choose Form (classic) for the familiar quiz flow, or Chat (conversational) to mirror a modern chatbot. Chat mode unlocks the toggles below it and influences how auto-advance behaves.
• Auto-advance: Enabled by default for form mode and optional for chat mode. When chat mode is selected, you can toggle this switch to automatically advance after each answer when you want a faster rhythm.
• Typing indicator: Show a brief "typing..." pause between questions to mimic a human conversational pace (chat mode only).
• Running score: Show a live score chip (Score: X) while respondents move through scored questions. This is useful for test-style quizzes where participants should see progress in real time.
• Transition: Fade, slide, or remove transitions between steps to match the feel you expect from your quiz.

Changes inside this accordion auto-save after a moment and refresh the preview on the right.

Appearance & Style

Appearance controls live in the Appearance & Style accordion:

• Primary color and background color: Enter 6-digit hex values. Background color is optional; leave it blank to inherit the page color.
• Widget border: Frame the widget-style view with a subtle border (this toggle is hidden when you pick full-page or chat styles).
• Header display mode: Choose when quiz titles and header CTAs appear:
  • Always show keeps the header up top on every step.
  • First question only shows the header on the first step and hides it as soon as respondents move forward (it reappears when they go back).
  • Pre-start CTA shows only the header with a Start button and optional supporting subtext until the quiz begins (the label and subtext can both be customized).
  • Hide entirely removes the header and banner image for a minimal experience.
• Navigation buttons: Align Next/Back buttons to the left, center, or right to match your page layout.
• Branding visibility: Toggle Show QuizFlow Labs branding off when your plan includes branding removal (available on Basic or higher plans).
• Chatbot launcher text: When the Public view style is Chatbot, override the bubble label so the text matches your brand personality. Leaving it blank falls back to the default "Chat."

Chat launcher & positioning

The Positioning accordion only appears when Chatbot presentation is active. It lets you anchor the chat bubble to the left or right edge of the host page. Interface settings immediately refresh the preview and the embed snippet adds data-quizflow-chat-position so the bubble appears where you designed it.

Installation & preview

The Installation accordion houses the embed snippet and preview button:

• The snippet injects <div data-quizflow-embed="{slug}"></div> and loads embed.js from the same origin as your workspace.
• The snippet automatically includes data-quizflow-mode="fullpage" when full-page presentation is selected and data-quizflow-mode="chat" when you opt for the chatbot. Chat mode also adds:
  • data-quizflow-chat-position (left or right),
  • data-quizflow-chat-text (the custom bubble label),
  • data-quizflow-primary-color (if you set a valid hex).
• Use the Open embed preview button to launch the latest preview HTML or a /q/{slug}?embed=1&preview=1 tab. It reflects the current Interface settings even before the next publish.
• Copy the snippet and paste it just before the closing </body> tag on any page where you want the quiz to load. The embed self-updates whenever you change the Interface settings; no need to repaste the code.