Chatbot Experience

Published July 25, 2026

Chatbot presentation launches the quiz from a branded launcher instead of an inline card. The launcher can appear as a floating popover-style bubble or as a direct button, and it appears on the public /q page plus any embed that uses data-quizflow-mode="chat".

This guide will walk you through:

• Enabling Chatbot mode from Appearance and seeing the launcher in preview.
• Customizing the launcher type, label, icon, color, notification, and edge alignment so the entry point matches your brand voice.
• How Installation Code and the public view share the same chatbot launcher attributes.
• Saving your settings, publishing, and re-sharing so the bubble roll-out stays in sync.

When to use this

Choose Chatbot when you want a lightweight launch trigger instead of a full widget. It works well for lead forms, guides, short quizzes, and AI Agent flows that should open on demand.

How it works

• Presentation: In Appearance > Presentation, select Chatbot. The builder previews the launcher immediately, and the same launcher loads on /q/{slug} plus any Installation Code that opts into chat mode.
• Launcher & triggers: Choose Button or Popover, then pick whether the launcher shows text, an icon, or both. Popover launchers can also use left/right alignment, a dismiss button, and a notification dot or preview message.
• Appearance & Style: Primary color controls the launcher color, while Typography controls the launcher label font. If your chatbot uses Chat experience or an AI Agent block, use Chat conversation colors to style message bubbles, the input field, and the send button after the chatbot opens.
• Installation Code: The embed automatically injects data-quizflow-mode="chat" plus the launcher attributes needed for the selected mode, label, icon, position, notification, preview text, and primary color. You can also add those data attributes manually if you want to force chatbot presentation without switching the saved presentation style.
• Publish cycle: The launcher relies on the published quiz definition, so re-publish after editing launcher or appearance settings so embeds load the newest values.

Step-by-step

1. Open Appearance > Presentation and choose Chatbot as the public view style.
2. Use Launcher & triggers to choose Button or Popover, update the label/icon, and set popover-only options such as alignment, dismiss button, and notification preview.
3. Use Appearance & Style to adjust primary color, typography, and chat conversation colors when your flow uses chat messages or an AI Agent block.
4. Go to Finish & Publish and copy the Installation Code; it already picks up the chatbot attributes, or add data-quizflow-mode="chat" yourself.
5. Publish or re-publish the quiz so the public page and embeds render the launcher you just designed.

Tips / Gotchas

• The same launcher appears on the hosted /q/{slug} page and embeds, so participants see a consistent entry point even when you drop the quiz on another site.
• Button launchers are direct calls to action. Popover launchers support alignment, dismiss button, notification dot, and preview text.
• Text-only launchers hide icon controls, and icon-only launchers hide the label field.
• Changing launcher, color, typography, or conversation color settings requires a new publish so Installation Code and embeds pick up the latest data attributes.
• Embedded Chatbot mode still respects Show QuizFlow Labs branding and the nav alignment you saved under Appearance.
• Use Embed Widget or Appearance docs when you need to troubleshoot script loading or presentation overrides.