Record a guide

Recording is the part of Reveal you actually do the work in. You open your own product in Chrome, turn on your camera, and walk through the thing you'd normally demo on a call. Reveal captures a short video clip for every element you click, and those clips become the steps of the guide.

Plan for about fifteen minutes the first time. Most of that is you talking.

Create the guide first

A guide exists before it has any recording in it, so make it in the dashboard before you start.

Click New guide from the dashboard, or Record new guide from the Guides page. The modal has three fields.

Title pre-fills with the URL of the page you're on. Change it to something a teammate would recognise in a list of thirty guides.

Description is for your team, not your users. A line about who this guide is for is enough.

Domains decides where the guide is allowed to run. Type a domain and press comma, space, or Enter to add it, or click Add. Each one appears as a removable chip. Wildcards work: *.acme.com matches every subdomain, and * matches any site.

Then click Create guide. It lands in Guides as a draft with zero steps, and the sidebar pins it.

Heads up. Domains is the field to get right. The pixel checks the domain list before it serves a guide, so a guide recorded on app.acme.com but listed under acme.com will never appear. If a finished, published guide isn't showing up, this is the first thing to check.

Open the extension on your product

Navigate to the page where the walkthrough starts, then click the Reveal icon in your Chrome toolbar. The popup is short, and every row in it matters before you press record.

• The reveal wordmark at the top, with icons for your guide library, a light and dark toggle, and close.

• The current domain, with a count of how many guides exist on it. Something like "app.acme.com 3".

• The active guide card: its title, a N steps · {relative time} line, and a camera icon that takes you straight into capture for that guide.

• The Camera row, showing the selected camera and an on/off toggle. It reads "No camera detected" until Chrome grants access.

• The Microphone row, showing the selected mic with a list icon for picking a different input.

• A Ready to record {url} line, confirming the page you're about to capture.

• Start recording, with a settings button beside it.

• + New guide, if you'd rather create one from here than from the dashboard.

• The extension version at the bottom.

Check the guide card is the guide you meant to record before you press anything.

Answer the Chrome permission prompt

The first time you switch the camera on, Chrome asks. The prompt is titled "Reveal Guide Recorder wants to: Use available cameras, Use available microphones" and shows a camera preview, a camera picker, a mic level meter, and a mic picker. Use the preview to confirm you're pointed at the right lens and the meter to confirm your voice is reaching the right mic.

Three buttons follow. Choose Allow while visiting the site.

Allow this time works, but Chrome will ask again on every single recording, which gets tedious by the third guide. Never allow blocks the camera bubble entirely, and you'd have to undo it in Chrome's site settings.

Recorder settings

The settings button next to Start recording opens five toggles. Set them once and they stick.

Auto snap to 16:9 resizes the browser window when recording starts. Turn this on. The recording's aspect ratio is inherited by both the MP4 export and the interactive player, so a window that isn't 16:9 gives you a video that letterboxes or crops wherever it's embedded. Snapping before you start is much easier than fixing it afterwards.

Mirror camera flips your camera preview horizontally, so you see yourself the way a mirror shows you rather than the way the lens does. It affects what you see while recording, which is worth changing if the reversed view makes you self-conscious.

Transparent background drops the background out of the camera bubble, so your face sits on your product's UI rather than on a slice of your room. Good if your background is busy.

Auto center keeps you centred in the bubble as you move, so you stay framed without sitting perfectly still for ten minutes.

Personal intro adds a short face-to-camera opening before the walkthrough begins. Leave it on for onboarding guides. It's the part that makes the guide feel like a person showing you around, and the interactive player's looping cover is generated from it.

The personal intro

If Personal intro is on, recording opens with your camera bubble large and centred on the page. This is the hello: who you are, what this guide covers, why it's worth two minutes.

The control bar shows a Personal Intro label and a Finish Intro button while you're in it. Click Finish Intro when you've said your piece. The bubble shrinks to a corner circle and the walkthrough starts.

Keep it to fifteen or twenty seconds. It's an introduction, not the guide.

Recording the walkthrough

The method is simple and it takes one guide to get used to. Talk about what the user should do, then click the thing you were talking about.

The click is what ends the step. Reveal captures the element you clicked, saves the clip you just recorded, and starts the next step. A banner at the bottom of the page reads "Recording, click anywhere to capture a step", which is a literal description of what's happening.

So the rhythm is: say "this is where you name your project, so give it something your team will recognise", then click the name field. That sentence becomes step one, and step one points at the name field.

Two things follow from this. Silence between clicks becomes part of the clip, so keep moving. And clicking something you didn't talk about still creates a step, so try not to click around while thinking.

Why one clip per step is worth the discipline

Every step holds its own video clip rather than one long recording sliced up afterwards. That means you can re-record step four on its own, later, without touching steps one, two, three, five, and six.

If your pricing page changes next quarter, you re-record the one step that shows the pricing page. Guides that would otherwise rot after a redesign stay usable, which is most of the reason people stop maintaining onboarding content.

The floating control bar

A control bar sits at the bottom of the page for the whole recording. It has, left to right:

• Stop, which ends the recording and finishes the guide.

• The elapsed time.

• Pause, for when someone walks into the room.

• A step counter, so you know how many steps you've captured so far.

• Undo last step, which removes the step you just captured. Use it the moment you fumble a sentence rather than pressing on and hoping.

• Discard, which throws the whole recording away.

• Preview, to watch what you've captured.

The step counter is the one to watch. If it's climbing faster than you're explaining things, you're clicking more than you're talking.

If your window stops being 16:9

If the window's shape changes mid-recording, a toast appears: "Recording: Your window is no longer 16:9, so the video export won't be either." It comes with a Snap to 16:9 button.

Click Snap to 16:9. It resizes the window back, and the rest of the recording is captured at the right ratio.

Heads up. Resizing the browser window while recording breaks the aspect ratio for exports. The MP4 export and the interactive player both inherit the recording's ratio, so a mid-recording resize leaves you with a video that letterboxes or crops in every embed. If you see the toast, snap back straight away, and if the recording is nearly done it's usually faster to discard and start again than to ship a mismatched export.

How to record a good one

The mechanics take five minutes to learn. What separates a guide people finish from one they skip is closer to editing than to recording.

Five to eight steps. Completion rate falls off a cliff on long guides. If your walkthrough genuinely needs fifteen steps, it's two guides, and probably a checklist.

One idea per step. A step that covers naming the project and inviting a teammate and setting permissions is three steps wearing a trench coat. Split it.

Keep clips short. Ten to twenty seconds per step is a good target. Users are watching this while trying to get something done.

Say the button name out loud. "Click Create project in the top right" is easier to follow than "click that". Your users are looking at their own screen, not yours.

Don't script it word for word. Written-out sentences read as written-out sentences, and the whole point is that a person is talking. Know the five things you want to say, then say them the way you'd say them on a call.

Record it twice. The second take is almost always better and takes half as long, because you've stopped working out what to say.

Next steps

• Edit and re-record: Fix one step without redoing the guide.

• Publish, draft, and archive: Get the guide live, and check it first.

• Behavior: When the guide fires and who sees it.

• Delivery options: Pixel, button, dynamic link, and the player.