Guided Troubleshooter
A troubleshooting wizard with a progress bar, an answered steps summary, the current question as selectable option rows, and step actions.
A troubleshooting wizard with a progress bar, an answered steps summary, the current question as selectable option rows, and step actions.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Guided Troubleshooter is a step by step wizard inside a single card: a progress header naming the flow with a Step 3 of 5 count and a fill bar, a summary of the two already answered steps each with a check dot and a Change button, then the current question presented as four selectable option rows with one chosen. Each option shows a radio dot, a label, and a one line detail clarifying the symptom. A footer carries Back and Continue actions plus an escape hatch line that opens a ticket with the answers so far attached.
Answered steps and current options are two typed const arrays, and the selected option is a plain boolean on the data rather than client state, so the block renders on the server. The escape hatch that opens a ticket with context attached is what keeps a stuck user from abandoning the flow.
Reach for this block on a fix a problem route or inside a help drawer, wired to your troubleshooting decision tree. Advance the step, fill the progress bar, and carry the collected answers into the ticket if the user hands off to a human.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the self serve troubleshooting flow. Other configurations:
Tip: always give the current step an escape hatch to a human and attach the answers so far; a stuck user should never restart from scratch in a ticket.