Step Types
Each step in a flow has a type that determines how it appears and behaves. Choose the step type that best fits the guidance you want to provide.
TOOLTIP
A small popover anchored to a specific UI element. Tooltips point at the target element and provide contextual instructions or explanations.
When to use: Guide users to specific buttons, fields, or controls. Ideal for most step-by-step walkthroughs where you want to draw attention to individual elements.
MODAL
A centered dialog overlay that appears on top of the application. Modals capture the user's full attention with a backdrop that dims the rest of the page.
When to use: Welcome screens, introductions before a walkthrough, important notices, or summary screens at the end of a flow. Use when the information is not tied to a specific element.
BEACON
A pulsing animated indicator attached to a target element. Beacons draw attention to an element without displaying content immediately -- the user clicks the beacon to reveal more information.
When to use: Highlight new features, draw attention to underused controls, or mark elements that have changed. Less intrusive than tooltips for discovery-oriented guidance.
BANNER
A full-width bar displayed at the top or bottom of the viewport. Banners span the entire page width and are visible without being anchored to a specific element.
When to use: Page-level messages, status updates, or instructions that apply to the entire page rather than a single element.
SLIDEOUT
A panel that slides in from the side of the screen. Slideouts provide more space than tooltips for longer content, forms, or detailed instructions.
When to use: Multi-paragraph explanations, feature tours with rich media, or any step that needs more content space than a tooltip provides.
VIDEO
An embedded video player displayed within the flow step. Videos can be hosted externally or uploaded directly.
When to use: Demonstrate complex interactions, provide video tutorials, or supplement text instructions with a visual walkthrough.
FORM
A data collection step that presents input fields to the user. Forms can include text fields, dropdowns, checkboxes, and other input types.
When to use: Collect user feedback during onboarding, gather preferences, or capture information needed to personalize the remaining flow.
CLICK
A step that represents a user click interaction. Click steps can target specific elements and advance the flow when the user clicks them.
When to use: Guide users to click specific UI elements or interact with buttons as part of a flow.
NAVIGATE
A non-visual step that redirects the browser to a target URL before the flow continues. The step uses the step's targetUrl to decide where to send the user and can point to a relative path within the app or to an external URL.
When to use: Move the user to the next screen of a walkthrough that spans multiple pages, or deep-link into a specific view before showing subsequent tooltips.
WAIT
A non-visual step that pauses the flow for a fixed duration (delay in milliseconds) before advancing. Nothing is rendered while the wait is in progress.
When to use: Give a page or animation time to settle before showing the next step, or introduce a deliberate gap between two steps in a timed sequence.
INPUT
A step that presents a single input field and waits for the user to type and submit a value. The submitted value is stored as a flow response and can personalize subsequent steps.
When to use: Capture a name, email, or preference during onboarding to address the user by name or tailor content to their stated goal.
SCROLL
A non-visual step that programmatically scrolls the viewport to a target element identified by a CSS selector, then automatically advances the flow. Nothing is rendered while the scroll is in progress.
When to use: Ensure a target element is in view before showing the next tooltip or beacon in a multi-step walkthrough that spans a long page.
Choosing the Right Type
| Step Type | Anchored to Element | Shows Content | User Interaction |
|---|---|---|---|
| TOOLTIP | Yes | Immediately | Read and advance |
| MODAL | No (centered) | Immediately | Read and advance |
| BEACON | Yes | On click | Click to reveal |
| BANNER | No (full-width) | Immediately | Read and advance |
| SLIDEOUT | No (side panel) | Immediately | Read and advance |
| VIDEO | Optional | Immediately | Watch and advance |
| FORM | Optional | Immediately | Fill and submit |
| CLICK | Yes | None | Click element |
| NAVIGATE | No | None | Auto (URL change) |
| WAIT | No | None | Auto (timed) |
| INPUT | Optional | Immediately | Type and submit |
| SCROLL | Yes (scrolls to) | None | Auto (scroll) |