Progress Checklist

What it does

The progress checklist walks new users through getting set up: a handful of tickable steps and a bar that fills as they go. Finished setups become customers who stay; abandoned ones quietly leave. This one keeps the momentum honest and the progress personal.

• Each visitor's ticks are their own, saved in their browser.
• The bar shows the completed count out of the total, plus the percentage, updating live as rows get ticked.
• Steps can link straight to the place where they get done, one tap from list to action.
• Preloaded ticks and fake almost-there momentum are banned.
• Your app can tick steps automatically through one documented hook, and a documented reset lets you wipe your own ticks for testing.
• The whole row toggles with one tap, and screen readers hear the count move.
• An empty list renders nothing.

How it works

1. 01

   Slide the step count, 3 to 6.

2. 02

   Pick the style, a full card list or a compact bar that opens on tap.

3. 03

   Copy the prompt, the checklist's plan for your AI, into whichever AI you use.

4. 04

   Write your real setup steps into the marked list, each with an optional link pointing at the exact page where that step happens.

5. 05

   Tick a few as a test: the bar should fill live, and a page reload should remember everything.

6. 06

   Try the app hook too: call the documented function and watch the row tick itself without a tap.

What you can customize

• How many steps: three feels instantly doable at a glance; six suits setups with real substance that people genuinely need walking through.
• Style: the card sits proud in a dashboard; the compact bar tucks into headers and sidebars.
• Colors, checks, and type adapt to your site automatically, because your AI builds the checklist right inside your own design, matching the cards you already use.

To show new users how your site works before they start ticking tasks, open with an onboarding guide popup.