Guided vs. Freeform

Choose between guided walkthroughs with numbered hotspots and freeform exploration mode for your HTML Demo.

HTML Demos support two modes of viewer interaction. You can combine both within a single demo or choose one based on your use case.

Guided mode

Guided mode adds numbered hotspots to the HTML page, walking the viewer through a specific flow step by step.

How it works

1. Open your HTML Demo in the editor.
2. Click Add Guide Step.
3. Click the element you want to highlight.
4. Write an instruction (e.g., "Click the New Project button to get started").
5. Repeat for each step in the flow.
6. Viewers see numbered indicators and a tooltip for each step, advancing through the guide sequentially.

When to use guided mode

• Onboarding flows where you need to show a specific sequence.
• Sales demos targeting a particular persona or use case.
• Feature announcements that walk through a specific workflow.

Configuring guided mode

• Step numbering -- Sequential numbers appear on each hotspot. Disable for unnumbered guidance.
• Auto-advance -- Optionally advance to the next step when the viewer performs the highlighted action.
• Completion message -- A custom message shown after the last step (e.g., "Ready to try it yourself? Start your free trial.").

Freeform mode

Freeform mode lets viewers explore the captured page without guidance. They click around, open menus, and navigate the UI naturally.

When to use freeform mode

• Technical evaluations where buyers want to explore at their own pace.
• Product pages with self-explanatory UI.
• Embedding in documentation where context is already provided by the surrounding content.

Configuring freeform mode

• Starting state -- Set which elements are visible/open when the demo loads.
• Interaction boundaries -- Restrict which elements are interactive. Disable links that would navigate away from the demo.
• Hint overlay -- Show a brief overlay on first load with text like "Click around to explore" so viewers know they can interact.

Combining both modes

You can offer a guided tour with an option to switch to freeform. Add a Skip Guide button that closes the guided overlay and lets the viewer explore freely.

Note: Analytics track both modes separately -- guided mode reports step completion rates, while freeform mode reports element interaction frequency.