Interface Settings

Interface settings is where you control the public experience of each quiz. Once a quiz is published and has a slug, 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.
• Toggling Modality & Experience controls such as chat mode, auto-advance, 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. Publish your quiz and open Interface from the 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. 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, and upload a JPG, PNG, or WebP image that stays under 3 MB after compression. The UI previews the uploaded image, and you can remove it any time to switch back to the centered layout.

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

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).
• 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.