How to film your own web app for a promo video
Give Vizard Agent your product's URL and say which flow to show. Vizard Agent reads the site's real copy out of its code, captures the pages at high resolution, drives the interface interactively to reach the screens that only appear when you use it, and builds the promo around genuine footage.
What is the short version?
Software promos usually use mockups, and mockups drift. The version in the video shows a button that moved last quarter and a price that changed, because nobody rebuilt the mockup — whereas the live product is always current.
- Go to Vizard Agent and give the product URL.
- Say which flow the video should show.
- Say the claim, and let it be checked against the site.
What do you need before you start?
A live URL and a clear flow. Vizard Agent can reach anything a visitor can reach, so a public product page or an unauthenticated calculator works directly, while anything behind a login needs you to supply screen recordings instead.
- The URL. The real, live product.
- The flow. Which journey to show.
- The claim. What the promo asserts.
- A reference. A video whose style you want.
- The frame. Widescreen or vertical.
What do you type into Vizard Agent?
Name the flow rather than the screens. Vizard Agent explores the interface to find the screens that flow produces, which is how it reaches states that only exist after you have typed something in — states no screenshot of the homepage contains.
Prompt
Variants worth knowing:
- Copy read from the code. So the wording on screen is genuinely yours.
- High-resolution section crops. Rather than one flat screenshot.
- Stock for the before. The old way, contrasted with the product.
What does Vizard Agent actually do?
Here is the order Vizard Agent worked in on a real promo for a live web service. The step that separates this from a screenshot montage is the seventeenth: it drove the calculator page interactively rather than photographing it sitting idle.
- Reads the website for the real claims it is allowed to make.
- Lists the effects library and checks the available asset tools.
- Fetches the site's raw HTML and extracts its structured data and scripts.
- Downloads the reference video and analyses its style.
- Reads the site's real interface copy out of its code and finds the page routes.
- Extracts a frame grid from the reference and reviews it.
- Captures screenshots of the real product pages and tiles them for review.
- Checks browser automation availability, then explores the calculator page interactively.
- Explores the homepage sections and the form, reviews the whole page, and captures high-resolution crops of every section.
Step 5 is a small thing that prevents an embarrassing one. Reading the interface copy from the page code means the words on screen in your promo are the words in your product, rather than an approximation typed from a brief written months ago.
What does the result look like?
A short brand promo in which every screen is the real product: the actual calculator with real values in it, the actual form, the actual result page — captured at high resolution, cropped section by section, and cut against stock footage representing the old way of doing the same thing.
Nothing in it is a mockup. That is the point, and it has a maintenance benefit too: when the product changes, the promo can be rebuilt from the live site rather than from a design file somebody has to find.
When does this not work well?
Filming a live product means the product itself has to be both reachable and presentable, and neither of those is guaranteed on any given day. These are the cases where Vizard Agent runs into the limits of the site rather than the limits of the brief.
- Logins block capture. Anything behind authentication needs your own recording.
- Real data is real. A live account shows live customer information.
- Slow or broken pages capture that way. The site's bad day becomes your promo.
- Claims must exist on the site. Vizard Agent only uses what it can find there.
- Interfaces change. A promo filmed today shows today's product.
How do you fix a result that came back wrong?
Name the screen or the claim that is wrong. Vizard Agent keeps the captured pages, all the section crops, the extracted copy and the page routes, so one screen can be recaptured or a claim corrected without exploring the whole site again.
- "That is the old pricing page." Recaptured from the current route.
- "The claim is too strong." Replaced with wording that is actually on the site.
- "Show the result screen longer." Re-timed from the captures already taken.
How does Vizard Agent compare to doing it yourself?
By hand this means screen-recording yourself using your own product, which sounds easy and produces a cursor wandering around the screen while you remember what to click next. Then every state you want on camera has to be recreated deliberately, take after take.
| By hand | Vizard Agent | |
|---|---|---|
| Getting the screens | Record yourself clicking | The interface driven to each state |
| Resolution | Whatever your screen is | High-resolution crops per section |
| The copy | Retype from the brief | Read out of the page's own code |
| Staying current | Re-record everything | Rebuilt from the live site |
Common questions
Does Vizard Agent need a login? No, and Vizard Agent cannot use one. Anything behind authentication needs a recording from you.
Will it show real data? Only what is publicly on your site. Never point it at a live customer account.
Can it interact with the product? Yes. Vizard Agent worked through the calculator page and the form interactively on this run.
Where do the claims come from? Your site. Vizard Agent reads the real copy rather than inventing marketing language.
Can I supply a style reference? Yes. Vizard Agent analyses the reference video's frames before building anything.
Why capture sections separately at high resolution? Because a promo cuts in close on a button or a number, and a single full-page screenshot has no detail left when you do. Section crops give the edit somewhere to go.
What about the "before" shots? Stock, usually. Vizard Agent searched for footage of the old way of doing it to cut against.
Can it rebuild the promo after a redesign? Yes. Vizard Agent rebuilds from the live site, which is the main advantage over mockups.
Does it work for mobile apps? Only through a web interface. For a native app, Vizard Agent needs recordings from a device.
How often should a promo like this be rebuilt? Whenever the interface changes enough to notice. Because Vizard Agent works from the live site rather than a design file, rebuilding is a re-run rather than a project, which is what makes keeping it current realistic.
Should the promo show the product or the problem? Both, in that order. Vizard Agent cuts stock footage of the old way against your real screens, because the interface only reads as a relief if the viewer has just been shown what it replaces.
Does Vizard Agent check the finished promo? Yes. It reviews the captured screens and the claims before delivery.