How do I record a UI overview with HappyRecorder?

This article shows you how to record a UI Overview (the Descriptive Guide type) with the HappyRecorder Chrome extension, and how to edit it after recording. It does not cover the Step-by-Step Guide type, which produces a click-through how-to with an animated walkthrough.

What a UI Overview article is for

An UI Overview explains everything on a single screen without walking the user through a task. You stay on one page, click the elements you want to describe, and HappyRecorder turns each one into a labeled tooltip. The reader lands on the article and gets the whole screen explained in one place: what each button does, what each field means, where to go next.

Use it for orientation pages. A dashboard, a settings screen, an editor. Anywhere a user opens something and thinks "what am I looking at." The Step-by-Step Guide is the opposite tool: use that when there is a task to complete from start to finish.

One thing worth knowing: the UI Overview is the same recording that will later power in-app product tours. Record a clean overview now and you are building the tour you will run inside your app later.

How to record one

Open the HappyRecorder extension, pick Descriptive Guide, and type a title before you do anything else. Then pick the group in your Help Center where the article should land. You do not have to, but future-you will thank you for filing it straight away.

Now click through the screen. For every element you click, HappyRecorder reads the underlying ID and DOM element (you will see a red outline around it) and writes a short label describing what it does. You are not narrating a video. You are pointing at things one at a time and letting the recorder capture the context behind each click.

You do not need audio for a UI Overview. Audio adds per-step context on Step-by-Step Guides, but a Descriptive Guide reads the screen itself, so skip it.

When you have covered the screen, stop the recording and click upload. Wait until every step shows Done and turns green before you switch or close the tab. The full upload matters. Cut it short and the generated overview can come out incomplete.

How to edit it after recording

Every recorded article gives you a visual step editor on top of the normal text editor, so you can fix what the recorder captured without re-recording. Open the article, go to the Steps tab, and you will see each captured element with its auto-written label. Rewrite any label that is off. Delete a step you do not need.

To hide sensitive data, blur it on one step and HappyRecorder applies the blur across every step that shows it. Your own name in the top bar, a customer record, an email address: blur once, gone everywhere.

You can also lift a single screenshot out of the overview and drop it into the article body. Right-click the step you want, and insert that screenshot inline. This is useful when a reader is deep in the article and needs to see exactly where one specific button sits, without scrolling back to the top.

How to keep it current after UI changes

When your UI changes, refresh the captured screens from the Steps tab using the Screenshot button (currently in Beta). HappyRecorder opens the page, compares the live UI against the elements it captured during recording, and swaps any screen that changed. If nothing changed, nothing happens.

For this to work you need a login stored under Settings, Connected Products. That is the account HappyRecorder uses to reach the screen and check it. Right now you refresh each screen individually. Because this is Beta, expect the odd edge case, and send us anything that looks wrong.

Tips that save time

Decide where you want to start before you open the recorder. If you open the extension, type a title, then close the window to navigate somewhere else, the title does not carry over. Copy your title first so you can paste it back fast if that happens.

When you click an element, prefer clicking the whole row or card rather than a tiny piece of it. The result looks closer to what the user actually sees on screen. If the thing really is just an icon, click the icon.

Keep the recording roughly 16:9. If you record a narrow or square panel inside a huge monitor, the generated visual comes out the same odd shape. A normal widescreen browser window gives you a clean result.

Treat it calmly. This is not a Loom and nobody is watching you record in real time. Take your time deciding what to click and what to describe. There is no clock.