Onboarding Checklist Overlay

WHAT IT DOES

Overlays a floating, interactive onboarding checklist on any web page to help users track their progress through new user setup steps. The checklist comes with predefined steps like "Create Account", "Set Up Profile", "Connect Social Media", "Complete First Task", "Invite Team Members", and "Explore Features". Each step can be checked off, and progress is shown with a percentage indicator and a visual progress bar. When all steps are completed, a celebratory animation with emojis appears. You can add custom steps, reorder them using arrow buttons, skip steps, or reset the entire checklist at any time.

WHERE IT RUNS

Works on all websites (match pattern *://*/*), making it perfect for SaaS platforms, web applications, dashboards, portals, or any site that needs user onboarding. The checklist state is saved per domain, so users can continue their onboarding progress across sessions and page reloads. Each website or application gets its own independent checklist.

HOW TO USE

Install the script and the floating checklist appears automatically on any page. Check off steps as you complete them and watch your progress bar fill up. Click "Add Step" to add custom steps specific to your workflow. Use the ↑ and ↓ buttons to reorder steps. Enable or disable celebration animations through the settings panel. Toggle dark mode for comfortable viewing in low-light environments. Reset the checklist at any time to restart the onboarding process. The checklist updates in real-time and saves your progress automatically.

REAL MECHANISM: DOMAIN-KEYED PERSISTENCE WITH REACTIVE RENDERING AND CELEBRATION ENGINE

This script employs a domain-based storage architecture where each website gets its own isolated checklist state. The getClientIdentifier() extracts the hostname from window.location.hostname and removes "www." prefixes, generating a unique storage key. Steps are stored using GM_setValue with a key format of "onboarding_steps_" plus the domain, ensuring data isolation between sites. The renderChecklist() function orchestrates the entire UI rendering, applying sorting, progress calculation using filter() and length, and DOM creation through document.createElement() to avoid innerHTML. Each step is rendered as a flex row with a checkbox input that toggles the completed state, triggering saveSteps() and re-rendering for immediate reactivity. The reordering mechanism uses array destructuring [steps[i], steps[i-1]] = [steps[i-1], steps[i]] to swap items in place, followed by persistence and re-render. The celebration engine is triggered when all steps are completed and celebrationEnabled is true, creating 20 animated emoji elements with randomized positions, font sizes, and animation durations (2-5 seconds) using CSS keyframes, with automatic cleanup after 4 seconds. Settings (celebration toggle, dark mode) are stored globally using a separate GM_setValue key "onboarding_settings" for cross-domain consistency.

THE PANEL

Drag the panel anywhere on screen by clicking and holding the header. It snaps to screen edges when released. Collapse it to a small bubble by clicking the minimize button, and expand it back by clicking the bubble. Resize the panel from any corner. Press Escape to close the configuration panel. Your position and size preferences are saved automatically per site.

PLEASE NOTE

This script requires the free BotGentz browser extension which provides the BGPanel framework and storage APIs. All data (steps and settings) is stored locally in your browser using GM_setValue and never sent anywhere. No analytics, no tracking, no external calls. The script only reads the current domain to isolate checklists and never accesses user data, passwords, or sensitive information. Steps are saved per domain, so if you work with multiple applications on the same domain, consider using custom steps or resetting as needed.