Using Stepify

Viewing Tutorials

All published tutorials are available at stepify.landingpad.digital/tutorials. Tutorials Listing Page The listing page shows all published tutorials as cards. Each card displays: - A thumbnail screenshot from the tutorial - The platform name (e.g. Chatwoot, Odoo CRM) - The tutorial title - Step count, duration, and creation date Filtering by Platform Use the filter buttons at the top to show tutorials for a specific platform. Click "All" to show everything. Video Preview Hover over a tutorial card to see a short video preview of the walkthrough. This gives you a quick sense of what the tutorial covers before clicking in. Tutorial Detail Page Click any tutorial card to open its full detail page. The page has two columns: Left Column: Video and Transcript - Video Player: Watch the full tutorial walkthrough. The video includes captions that are on by default — use the CC button to toggle them. - Step Markers: Below the video, coloured dots show where each step starts. Click any dot to jump to that point in the video. - Transcript: A full text transcript of the video narration, useful for searching or reading along. Right Column: Step-by-Step Guide Each step shows: - A numbered badge - A description of what happens in that step - A screenshot (click to view full-size in a lightbox) Navigate between screenshots using arrow keys when the lightbox is open. Accessibility Features - Keyboard navigation: All interactive elements are keyboard-accessible - Screen reader support: Semantic HTML with ARIA landmarks and labels - Captions: Video captions are on by default - Light/Dark mode: Click the sun/moon icon in the top bar, or let it follow your system preference - Reduced motion: Video previews are disabled when your system prefers reduced motion

How Stepify Works

Stepify uses AI to control a real web browser, navigate applications, and document every step along the way. Here's what happens behind the scenes. The Generation Process 1. Goal Definition Each tutorial starts with a clear goal — for example, "Add a new team member in NextCloud" or "Create a sales pipeline in Odoo CRM". The goal tells Stepify what to accomplish. 2. Browser Automation Stepify launches a real browser (Chromium) with pre-configured authentication for the target platform. It navigates the application just like a human user would — clicking buttons, filling forms, and waiting for pages to load. 3. Screenshot Capture At each meaningful action, Stepify captures a screenshot at 1280×800 resolution. These screenshots are processed to: - Redact any personally identifiable information (PII) like email addresses - Add visual annotations highlighting where the action occurred - Generate alt text for accessibility 4. Video Recording The entire browser session is recorded as a video. After recording, Stepify generates: - A full-length tutorial video (WebM format) - A short preview clip for the tutorials listing page - WebVTT captions describing each step 5. Quality Review Every generated tutorial goes through an automated quality review that checks: - Whether steps follow a logical flow - Whether screenshots match their descriptions - Whether the goal was actually achieved - Overall clarity and completeness Tutorials scoring below the quality threshold are flagged for human review rather than published automatically. 6. Publishing Approved tutorials are published with a unique shareable URL. Each tutorial page includes the video, transcript, and step-by-step guide — all generated from a single browser session. Privacy and Security - PII Redaction: Email addresses and other personal data are automatically detected and blurred in screenshots before saving - Isolated Sessions: Each tutorial generation runs in its own browser context - No External Data: Screenshots and videos are stored on our own infrastructure, not third-party services