Chatbot Experience

Chatbot presentation launches the quiz from a floating bubble instead of an inline card. The bubble appears on the public /q page and any embed that uses data-quizflow-mode="chat", keeping the conversation tone on-brand while respecting the host page's layout.

This guide will walk you through:

• Enabling Chatbot mode from Interface settings and seeing the bubble in preview.
• Customizing the launcher text, color, and edge alignment so the bubble matches your brand voice.
• How the embed snippet and public view share the same chat data 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, conversational launch trigger instead of a full widget so the experience feels like a branded assistant hovering on the page. It works great for lead forms, guides, and short quizzes that should pop open on demand.

How it works

• Presentation: In Interface settings > Presentation, select Chatbot. The builder instantly previews the bubble on the right edge by default, and the same bubble loads on /q/{slug} plus any embed snippet that opts into chat mode.
• Branding & alignment: Customize the launcher label, choose Left or Right positioning, and pick a primary color so the bubble mirrors your palette. Interface settings surfaces live previews so you can confirm the placement and label.
• Embed snippet: The embed automatically injects data-quizflow-mode="chat" plus data-quizflow-chat-position, data-quizflow-chat-text, and data-quizflow-primary-color when chat presentation is active. You can also add those data attributes manually if you want to force the bubble without switching the saved presentation style.
• Publish cycle: The chat bubble relies on the published quiz definition, so re-publish after editing the launcher text, color, or position so embeds load the newest values.

Step-by-step

1. Open Interface settings > Presentation and choose Chatbot as the public view style.
2. Use the Branding & alignment section to edit the launcher text, color, and chat position.
3. Copy the embed snippet from Installation; it already picks up the chat attributes, or add data-quizflow-mode="chat" yourself.
4. Publish or re-publish the quiz so the public page and embeds render the bubble you just designed.

Tips / Gotchas

• The same bubble appears on the hosted /q/{slug} page and embeds, so respondents see a consistent chat tone even when you drop the quiz on another site.
• Leaving the chat launcher text blank falls back to the default Chat label.
• Changing the chat text, color, or alignment requires a new publish so the snippet picks up the latest data attributes.
• Embedded Chatbot mode still respects Show QuizFlow Labs branding and the nav alignment you saved under Interface settings.
• Use Embed Widget or Interface Settings docs when you need to troubleshoot script loading or presentation overrides.