A walkthrough is a sequence of steps. Each step is a region you highlight, plus a short description. The bookmarklet captures both, on any website, in any browser.
This guide assumes you have already installed the personalized bookmarklet on your bookmarks bar. If you have not, follow the installation guide first. From here, recording is four operations: launch, highlight, describe, save. The whole flow stays on the page you're recording — no popups, no tab switches, no copy-paste.
Navigate to the page you want to record. Click your Record bookmarklet on the bookmarks bar. Within about a second, the FoxChat side panel slides into the bottom-right corner of the page. The panel renders inside a Shadow DOM root, so it inherits none of the host page's CSS and leaks none of its own. You will see:
Click + Highlight. Your cursor turns into a crosshair. Click and drag a rectangle around the element you want to highlight in the current step — a button, a form field, a section header, an entire dashboard tile, anything. Release. The recorder draws a numbered cyan badge on the region with a connector line pointing to a description box.
FoxChat captures more than the screen coordinates. For each highlight, the recorder snapshots seven stable identifiers from the underlying DOM: the CSS selector, ARIA label, ARIA role, any data attributes on the element, an XPath expression, the element's surrounding text, and a position hint relative to nearby anchors. During playback, the runtime falls back through these in priority order — so when the host site's UI changes (class names rename, layout shifts, A/B tests swap copy), the highlight still finds the right element.
Type into the description box. One sentence is fine. Two is better. Visitors will see this text as the on-screen narration when they play the walkthrough back. Plain language wins — "Click here to start a free trial" beats "Initiate the registration funnel."
Click + Highlight again to start step 2. Repeat for as many steps as your walkthrough needs. The step counter updates as you go. You can scroll the page between highlights — the recorder tracks scroll position per step so playback restores the right viewport.
Two important constraints to know:
history.pushState), or switch to the Chrome extension, which persists across navigations.Click Save in the panel. The recorder confirms the publish, gives you a shareable URL, and closes the panel. The walkthrough is now in your walkthroughs dashboard, where you can rename it, change its visibility, or grab the embed code. See sharing and embedding for the URL options.
You have a few options before saving:
Esc to dismiss the panel and click the bookmarklet again to start fresh.If your microphone is connected and the host page allows audio, the recorder offers a Record audio toggle per step. Click it before describing the step, speak your narration, click it again to stop. The audio uploads alongside the step text and plays during playback. Visitors can mute audio if they prefer reading captions; both stay in sync.
You can also leave audio off for now and add it later from the dashboard's per-step editor — the editor offers the same in-browser audio recording, plus an upload-from-file option for pre-recorded audio.
Record your first walkthrough in two minutes. No credit card required.
Start free trial