By the Demo Maker Pro team · Updated
The method we use, built from our technical lead's experience training a team of network engineers on production IT tools. One task per demo, captured from the real application, written for the new hire, and kept current when the software changes.
Short answer. Pick one task, reset the application so it looks like a fresh login, and record that task once at a fixed window size. Capture browser-based apps as real HTML with a browser extension and Windows programs as screenshot steps, then write each tooltip as if you were standing next to a new hire. Publish it as a link or export it as one HTML file, and when the software updates, re-record only the steps that changed.
An interactive demo is a captured copy of a real workflow. The viewer clicks the highlighted target on each screen to move to the next step, and a tooltip says what to do and why. It opens in any browser. Viewers need no account, no license and no install.
With Demo Maker Pro, browser-based apps are captured as real HTML through a Chrome or Edge extension, and Windows programs are captured as images of the application window. Both kinds of step can sit in the same walkthrough. The rest of this article is the method, and it starts with why the usual alternatives keep breaking.
Before building Demo Maker Pro, our technical lead trained a team of about 30 network engineers. The tools were the usual production IT set: ServiceNow, Jira, Grafana, vCenter, Cisco Application Centric Infrastructure (ACI), Nexus Dashboard and the Microsoft Azure, Amazon Web Services (AWS) and Google Cloud Platform (GCP) consoles in the browser, plus SecureCRT on the desktop for Secure Shell (SSH) sessions to switches and routers.
He tried the usual options. Showing people in person worked until they forgot, and then he showed them again. Video recordings went out of date with every update, every change to the graphical user interface (GUI) and every new feature, and the whole video had to be recorded again.
PowerPoint was the worst of it. He built a deck for the ServiceNow workflow of creating an incident. A workflow of 10 to 15 steps took him about 2 to 3 days: screenshots, arrows drawn all over them, and callout boxes so people would understand. Then an update moved one of the options to a completely different place. It took hours just to find where the button had gone and rebuild the deck. The whole time, colleagues kept asking when it would be updated.
The material also got lost. In his last job, nobody built interactive demos of the production tools. At most there was a quick screen recording of configuring a new network and applying it to 20 servers in Cisco ACI, or of creating a security group rule in AWS. Most people were too busy to build training, because there was always someone like him they could call to walk them through it on a Teams call. When a deck or a video did exist, nobody knew which folder or which drive it was on. The answer was "let me email it to you when I find it."
The cost lands on whoever knows the system. When training was missing or out of date, he was pulled away from his own work to hand-hold, and people still made mistakes or forgot steps because nothing was written down.
The same routine works for a browser-based app and a Windows program.
Pick one task. One demo, one workflow: create an incident, configure a new network for 20 servers, create a site-to-site virtual private network (VPN). Then you can send one link for one job. Do not worry about a long step count. A long procedure is exactly what people forget, so it is exactly what needs a demo.
Reset the application. Close menus, side panels and extra tabs so the first screen looks like a fresh login. The viewer should start where a new hire starts.
Set the window size before you record. Open the Demo Maker Pro extension and press its Resize button. It measures the page area (the browser viewport, not the monitor) and resizes the window to the recommended 1536 x 864 for you. Then leave it alone until the recording is done. See how to check your recording size.
Capture browser-based apps as real HTML. For ServiceNow, Jira, Grafana, vCenter, Cisco ACI, Nexus Dashboard or the Azure, AWS and GCP consoles, record in your own Chrome or Edge with the Demo Maker Pro extension, in the session you are already signed into. Keep the desktop app open while you record. Each click becomes a step captured as real HTML, so text stays sharp and selectable. Leave a second or two between clicks, because clicking too fast can lose a step.
Capture Windows programs as screenshot steps. For a desktop program such as SecureCRT, use Desktop Capture. Click Record Desktop, switch to the program, press the capture key (F9 by default) once per screen, then click Stop. It captures the application window, not the whole screen. Each desktop step arrives with its target in the middle; drag it onto the thing you are pointing at.
Mix the two when the workflow crosses tools. Browser steps and desktop steps land in one step list in the order you took them. A task that starts in a web console and finishes in a Windows program becomes one walkthrough across browser and desktop.
Write each tooltip as if you were standing next to the new hire. Assume nothing. Bold the exact thing to click or read. Call out the one thing they must pay attention to, the way you would say "make sure you pay attention to this" in person. The viewer moves through the demo by clicking, not typing, so a tooltip never tells them to enter or type text. Write "Click Short description to fill in the summary", not "Enter a short description".
Give the last screen a click. End on a click so the final state, such as the saved incident or the new rule, is captured.
Publish a link or export one file. Publish a shareable link on demos.demomakerpro.com, or export one self-contained HTML file and host it yourself.
For our technical lead, the same ServiceNow incident workflow that took 2 to 3 days as a PowerPoint took about 20 to 30 minutes as an interactive demo. That is one person's experience on a workflow he knew well, not a guarantee.
See one: the ServiceNow incident management walkthrough is a captured incident workflow you can click through yourself.
Updates are where slide decks and videos lose. With a demo, the work matches the size of the change.
Reopen the saved project, re-record only the step or steps that changed, and leave the rest alone. Browser steps are real markup, so a single changed screen can be re-recorded on its own. Then publish the same project again. That updates the existing demo in place, so the link you already sent stays current and nobody has to go looking for a new version.
One habit makes this work: keep the project file (.dmp) where the next person who updates the demo can find it. The published link and the exported file are the finished demo. The project is what you edit.
A demo nobody can find is the folder and drive problem all over again. Put the links where new hires already look.
Know the limits before you pick. A published link is unguessable, but it is not password protected, so treat it as public. Whatever was on screen when you recorded is in the demo. If the screens show internal hostnames, addresses or anything else that should stay inside the company, use the exported file on your own systems instead.
The team that owns the system owns its demos. It does not have to be the person who built the first version. If the boss assigns the firewall engineer to the access control list (ACL) demo or the site-to-site VPN demo, that engineer updates it when the interface changes.
Built well and kept current, a demo answers the question a new hire would otherwise call you about. That is how a team lead gets time back.
Not everything needs one. Plain command line (CLI) work in SecureCRT is the clearest case. The commands and the output are text, and text belongs in a runbook, where people can copy it and paste it straight into a session. In a desktop step that same text is part of the picture, so a viewer cannot select or copy it.
The exception is a multi-tool workflow a new hire has to follow end to end. If the job runs from a ticket in ServiceNow to a change on a switch in SecureCRT and back, the CLI step belongs in the demo. There, the order of the tools matters as much as the commands.
Related: interactive demo vs screen recording, software training without a sandbox, and the documentation.
Pick the task your team asks you about most, record it once, and send the link instead of joining another Teams call. Demo Maker Pro captures browser-based apps and Windows programs in one walkthrough.
Request trial