Capturing a screenshot and click position at each step, adding a hotspot and tooltip, and playing the result as a click-through is a Chrome extension plus a small viewer, which an agent builds in a weekend. What Supademo adds is the layer around it: hosted share pages with drop-off analytics, lead capture and CRM sync, AI voiceover and translation, HTML demos that capture the live page, and desktop recording. For your own walkthroughs the screenshot version covers most of the need; for sales teams the pipeline is the product.
Before you buildSupademo's Free plan keeps 5 demos and unlimited views at no cost, which is enough if you share a few walkthroughs.
Build me a click-through demo recorder to replace Supademo for my own product walkthroughs. Requirements: - A Chrome extension (Manifest V3) in TypeScript, built with Vite and `@crxjs/vite-plugin`, loaded unpacked. The toolbar button starts and stops recording on the active tab. - While recording, a content script reports each click (x and y in viewport pixels, element text or aria-label, page URL, viewport size). The service worker saves a screenshot with `chrome.tabs.captureVisibleTab` taken just before the page reacts. Steps live in IndexedDB (`idb`). - Stop opens an editor page (React): reorder and delete steps, drag the hotspot, edit tooltip title and body, draw a blur rectangle that is burned into the PNG on a canvas so the hidden text is gone, and set an accent colour and a logo file. - Export a folder or ZIP (`fflate`) with index.html, demo.json and the PNGs. The viewer is vanilla JS: arrow keys, clicking the hotspot advances, a progress bar, `?step=3` deep links, a mobile layout. Also export a PDF with one page per step (`pdf-lib`) and an iframe embed snippet. - Demos can be exported and re-imported as JSON; nothing else is stored outside the browser profile. - No accounts, no telemetry, local-first. The manifest asks for `<all_urls>` so recording survives page navigation, and the README says why. - Out of scope: AI voiceover and translation, lead capture, analytics, CRM integrations, branching, DOM-based HTML capture, desktop-app and video recording. - README: loading the unpacked extension, hosting the export on any static host, and warnings that screenshots hold whatever was on screen (blur before sharing) and that chrome:// pages and the Chrome Web Store can't be captured.
Opens your agent with the prompt filled in, you press enter. Or copy it and paste it into an empty folder.
The first prompt builds the core. Run these one at a time in the same folder to grow it into your own Supademo.
Extend the demo recorder in this folder. Requirements: - Add an export "Guide" that writes a Markdown file with one section per step: a numbered heading from the tooltip title, the tooltip body as text and the screenshot as an image file in a folder next to it. - Draw the hotspot as a red ring on the exported PNG so the guide works without the viewer. - Offer a standalone HTML version of the same guide with inline CSS. - Update the README.
Add anonymous view counts to the exported demo viewer in this folder. Requirements: - The viewer sends one POST per step reached to a URL set in demo.json, with demo id, step index and a random per-visit id that is never stored; no cookies, no IP storage. - Provide a tiny Fastify receiver (`collector/`) with better-sqlite3 and a page that shows views per step and drop-off as bars. - The collector is optional: the viewer works unchanged when the URL is empty. - Update the README with the privacy tradeoffs.
Add an HTML capture mode to the demo recorder in this folder. Requirements: - Per step, serialise the page DOM with inline computed styles, convert images to data URLs up to 500 KB each, and strip scripts and event handlers. - The viewer renders each step in a sandboxed iframe (`sandbox=""`) and places the hotspot over the captured element's bounding box. - Fall back to the screenshot when serialising fails or the result is over 5 MB, and mark the step in the editor. - Update the README with the pages that capture badly.
Sales and marketing teams use click-through demos to show a product without a live call, and the tool also hosts the demo, shows who watched what and pushes the lead into the CRM. Making the click-through is the easy part; the reporting and integrations around it are what teams pay for.
Estimate · The extension and viewer run locally; static hosting is free at this size. The build is token usage on your agent plan.
| Plan | Monthly | Annual, per month | What you get |
|---|---|---|---|
| Free | $0/workspace | $0/workspace | 1 creator or admin, 5 guided interactive demos, 50 4K video recordings, unlimited views, AI text personalization, sharing as link, embed, video or PDF. |
| Scale | $50 | $38 | Everything in Free plus Supademo AI and MCP, branching and variables, tracking links and analytics, watermark removal, showcase collections, 5 view-only collaborators and 20+ more premium features. |
| Business | $249/workspace | $199/workspace | 1 creator included. Adds guided HTML demos, HTML text and image editing, AI data editing, priority support and unlimited view-only collaborators. |
| Growth | $450/workspace | $350/workspace | 5 creators bundled. Adds sandbox demos, Route Hub, AI voice cloning, demo versioning and white-glove onboarding. |
| Enterprise | custom | — | Starts at 10 creators. Adds SSO and SAML, custom data residency, multiple workspaces and dedicated support. |
Free covers one creator, 5 guided interactive demos, 50 4K video recordings and unlimited demo views.
Kinda. The core is a weekend build with the prompt on this page, but real gaps remain: Hosted share pages with analytics on views, drop-off and conversion, Lead capture inside the demo and HubSpot, Salesforce and Marketo integrations.
About $50 a month on the Scale plan per seat, $600 a year (checked 2026-10-19).
Hosted share pages with analytics on views, drop-off and conversion; Lead capture inside the demo and HubSpot, Salesforce and Marketo integrations; AI voiceover, translation and the AI Demo Agent; HTML demos that capture the live page, plus sandbox demos on higher plans; The Mac and Windows desktop recorder and 4K video recording. If any of those matter to you, keep paying.
Yes: Mimik (open source), Usertour (open source).