Supademo: record a workflow that others can click through

When a colleague asks how to export a report, a screenshot may miss the surrounding steps, while a long video requires searching back and forth. Supademo combines captured screens and explanations into a clickable demo that can be shared or embedded in help material. It also offers video, HTML demos and demo assistants. This article focuses on screenshot-based guided demos as an accessible starting point. The product page describes these uses.

A “hotspot” is a clickable explanation on a screen, directing attention to a location or action. Readers follow hotspots through saved screens without entering your real business system. This works well for a stable path. When the product changes, the creator still needs to check whether the old guide applies.

Use “choose a report, set the dates, export a file” as a teaching scenario. The goal is a guide a colleague can follow independently. The sample wording below is proposed by the author.

1. Prepare a short path. Register, install and pin the Chrome extension, and open the page to demonstrate. Replace names, order numbers and other business details with teaching data before recording. Free includes five guided demos. HTML demos and branching have separate plan requirements; start with screenshots here.
2. Record the actions. Use Save As in the recording window to select a destination folder, then start recording. The extension captures actions and assembles steps. Turn off Enable Video Recording for a screenshot-only demo. Stop after choosing the report, setting the dates and exporting, then enter the editor. For right-click menus or system dialogs, use desktop recording or upload screenshots and add hotspots manually; the extension should not be assumed to capture every screen.
3. Give each step one clear action. Check automatically created hotspots in the editor. Move them beside the relevant controls and edit the explanations: for example, “Choose this month,” “Confirm the date range” and “Click Export.” The hotspot guide explains that multiple hotspots on one step appear simultaneously. To explain two locations in sequence, duplicate the step and adjust the hotspots and navigation separately. Avoid cramming three instructions into one bubble.
4. Follow the reader's path, then share. Check hotspot positions, navigation and the final screen, and remove real business data from screenshots. Set the viewing scope in the share dialog, then copy the link. Public lets anyone with the link view it; Private limits viewing to people with access. You can also embed the demo in help material. A step parameter can link directly to the relevant step when answering a specific question.

To assess clarity, ask someone unfamiliar with the workflow to explain what they expect to get at the end. Clicking through the demo is one check. Permissions and results in the real business application still need to be confirmed there.

Keep explanations attached to a particular screen

A hotspot puts “where to click” and “why” in the same step. Readers need not alternate between a paragraph and searching a whole screenshot. Moving to the next screen on a click also lets them control the pace. The tradeoff is deciding where steps begin and end: too few can leave gaps, while too many make a simple task laborious. The useful principle is to organize information around a clear action rather than divide it by recording duration.

Maintain one guide while allowing entry at a specific question

A share link keeps the screens in one guide, while a step parameter lets readers return to a relevant location. This reduces the need to capture a new set of screenshots for each question, but maintainers still need to check images and wording. The October 22 official update added stale-translation alerts: when translated text changes, the tool indicates which languages need updates. A transferable lesson is to preserve content while making easily missed maintenance relationships visible. These benefits are analysis based on the public mechanisms.