Appearance

Published July 25, 2026 • Updated July 31, 2026

Appearance is where you control the public experience of each quiz. You can tune its presentation style, experience mode, appearance, chat behavior, and embed behavior before you publish.

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 the Asset Library.
• Toggling Modality & Experience controls such as chat mode, auto-advance, running score, and transitions.
• Fine-tuning Appearance & Style (colors, typography, header visibility, branding, navigation, launcher styling, and chat conversation colors).
• Reviewing the live preview before going to Finish & Publish to publish, preview embeds, or copy Installation Code.

When to use this

Use Appearance when you are ready to tune how the hosted page, embed, or chatbot experience should look and behave. Copy the actual Installation Code from Finish & Publish after the presentation is configured.

Before you get started

1. Open Appearance from the Flow 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, typography, headers, branding, launcher styling, and chat conversation colors under Appearance & Style.
4. Continue to Finish & Publish to publish, copy Installation Code, or open the embed preview.

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 Basic+, and the corresponding full-page embed also locks to the viewport (full-page embeds require Pro).
• Chatbot lets the experience launch from a branded launcher. Use a floating popover when you want a chat-style bubble, or a button when you want a direct call to action. When you publish with Chatbot view selected, Installation Code adds data-quizflow-mode="chat" plus launcher attributes for the selected mode, label, position, notification, and styling.

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 Asset Library picker first (keep it under 3 MB after compression). This image acts as the default split media for the flow. 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 (Basic+).
• 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, Appearance 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 or Chatbot presentation is enabled, the Launcher & triggers controls let you keep the quiz behind a branded launcher until visitors are ready. Choose the mode (button or popover) 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, when Popover is selected, add a dismiss button plus a notification dot or preview message.

For popover launchers, decide whether the launcher lives on the left or right edge of the viewport. Full-Page launchers can also use auto-open triggers such as manual only, time on page, scroll percentage, or exit intent. Chatbot launchers focus on the visible launcher behavior and conversation entry point, so only the controls that apply to that presentation are shown.

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 participants 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: Use the palette picker or enter a 6-digit hex value. Primary color controls brand accents such as quiz buttons, selected states, focus rings, launcher color, and preview highlights. Background color is optional; leave it blank to inherit the page color.
• Default text color: Leave this blank for Auto, which chooses a readable color for the current background. Set a hex color only when you need a specific override.
• Typography: Choose the default font family for the quiz. Chatbot launcher text follows the same typography setting.
• 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 participants 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 and style standard navigation controls such as Next, Back, Submit, and pre-start CTA buttons. Mobile navigation options appear only when those standard controls apply.
• Branding visibility: Toggle Show QuizFlow Labs branding off when your plan includes branding removal (available on Basic or higher plans).
• Chat conversation colors: When the Public view style is Chatbot, customize message bubbles, the input field, and send button colors after the chatbot opens. These controls are useful for Chat experience and for quizzes that use an AI Agent block.

Finish & Publish installation

The Finish & Publish step is now the source of truth for Installation Code and embed preview actions:

• The Installation Code injects <div data-quizflow-embed="{slug}"></div> and loads embed.js from the same origin as your workspace.
• The Installation Code automatically includes data-quizflow-mode="fullpage" when full-page presentation is selected and data-quizflow-mode="chat" when you opt for the chatbot. Chatbot mode also adds the launcher attributes needed for your selected launcher type, label, icon, alignment, notification, preview text, and primary color.
• Use the Open embed preview button to launch a /q/{slug}?embed=1&preview=1 tab using the saved Appearance.
• Copy the Installation Code 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 Appearance; no need to repaste the code.