Process Steps Widget
Explain how a service works in three to six numbered steps, laid out in a row on desktop and stacked on phones. Set a current step and the same component becomes a progress tracker for an order, claim or application.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/process-steps" title="Process Steps by A2Z Tools" width="100%" height="540" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="process-steps" data-height="540"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Every line becomes one step: a title, a short description and an optional icon keyword. Ten icons are drawn as small inline vector graphics - phone, calendar, document, check, truck, star, chat, home, wrench and money - and an unknown or empty keyword shows the step number in the badge instead, so the publisher never sees a broken image. Up to five steps sit side by side once the frame is 560 pixels wide, joined by a line between the badges; six or more steps, or any narrower frame, stack vertically with the line running down the left. Entering a current step number turns on tracker mode: every earlier step shows a check mark and a visible Done label, the current one gets a ringed badge, a Current step label and aria-current="step", later steps are greyed and joined by a dashed line, and a summary such as Step 3 of 4: Shipped appears above the list. Twelve steps is the maximum.
Method
- Line format: title | description | optional icon (phone, calendar, document, check, truck, star, chat, home, wrench, money)
- Unknown or empty icon -> the step number is shown in the badge
- Steps <= 5 and frame >= 560 px -> one row; otherwise a vertical list
- current = n -> steps 1..n-1 Done, step n aria-current="step" with a Current step label, steps after n upcoming
Worked examples
Delivery tracker
Inputs: Steps: Order placed | check; Packed; Shipped | truck; Delivered | home; current 3
Result: Steps 1-2 Done, step 3 Current step, summary Step 3 of 4: Shipped
Earlier steps show a check icon regardless of their own icon; step 4 is upcoming.
Seven-step onboarding
Inputs: Seven lines, no current step, 700 px wide frame
Result: A vertical list of seven numbered steps
More than five steps never form a row, so titles are not squeezed into narrow columns.
Limitations
- The current step is fixed in the embed code; the widget does not look up live order or application status.
- Only the ten built-in icons can be used - no custom images per step.
- Descriptions are plain text without links; put a call to action next to the component instead.
Where publishers use it
- A plumber's or electrician's home page explaining call, visit, quote and job done
- An online shop's delivery page showing ordered, packed, shipped and delivered with the current stage set
- A visa, mortgage or insurance-claim service showing applicants which stage their file has reached
- A SaaS onboarding page: sign up, connect your data, invite the team, go live
- A clinic's new-patient page walking through booking, forms, first appointment and follow-up
Questions
How many steps work best?
Three to five. Up to five fit in one row on screens 560 pixels and wider, each step getting about a fifth of the width; a sixth step would squeeze the text, so from six steps the component always uses the vertical list. Twelve steps is the hard limit, which is already long for a How it works section.
How does tracker mode differ from the plain steps?
With Current step left blank all steps look equal - right for marketing copy. With Current step set to 3, steps 1 and 2 show a check mark and the word Done, step 3 is ringed and labelled Current step, step 4 onwards is greyed, and a line such as Step 3 of 4: Fixed written quote sits on top. Screen readers announce the current step through aria-current="step".
Which icons are available?
Ten line icons drawn for this component: phone, calendar, document, check, truck, star, chat, home, wrench and money. Type the keyword in the third cell; spelling is case-insensitive. Any other word, or nothing, shows the step number instead. There are no icon fonts or external images, so the component loads nothing extra.
Can I update the current step without editing the page?
The current step is part of the embed code, so changing it means changing one number in the snippet (v_current=3). For a live per-customer order tracker you would generate that number from your own system when you render the page; the widget itself has no account or database.
Is colour the only way the state is shown?
No. Done and Current step are written out as text labels, completed badges also change shape to a check mark, and the current badge has a thick ring. That keeps the tracker readable for colour-blind visitors and in greyscale printouts.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Process Steps https://a2z.tools/embed/process-steps
<a href="https://a2z.tools/embed/process-steps">A2Z Tools Process Steps</a>
[A2Z Tools Process Steps](https://a2z.tools/embed/process-steps)
Process Steps by A2Z Tools - https://a2z.tools/embed/process-steps
Related widgets
-
A vertical or sideways-scrolling timeline of dated milestones, with an optional Now marker.
-
A tick-off checklist with sections, progress, copy and print - saved only on the visitor's device.
-
Your own claims - family owned, free estimates, licensed - as clean badges, each marked self-declared.
-
Build a quick price quote from up to 8 line items with discount and tax, then copy it as text.
-
Accessible FAQ accordion with search, expand-all, numbering and a copy-as-text button.
-
Photo grid, masonry columns or a sideways strip with a keyboard-friendly lightbox and alt-text checks.