Recording a Walkthrough from the Bookmarklet

The bookmarklet path: no extension install, no permission prompts, works on every modern browser. Single-page recording. Same step fidelity as the Chrome extension.

This page is the walkthroughs-section view of the bookmarklet recording flow. For the bookmarklet-section deep dive on the recorder side panel itself, see recording with the bookmarklet — that page has the moment-to-moment UI walkthrough. This page covers when to choose the bookmarklet path over the extension, what you give up, and what you gain.

When the bookmarklet is the right choice

Pick the bookmarklet path when any of the following is true:

• Your browser is not Chromium. Firefox, Safari, and other engines do not run our extension. The bookmarklet works on all of them.
• You're on a corporate-managed Chrome where extensions are blocked by IT policy. Bookmarklets are just bookmarks — IT policies that lock down extensions usually do not touch the bookmarks bar.
• You only need to record one walkthrough. Installing an extension for a one-time task feels heavy. Drag a bookmarklet, click it once, you're done.
• You're recording someone else's product to share with a colleague. The bookmarklet runs on any domain — you can record a step-by-step of a third-party tool to onboard a teammate, without that tool needing FoxChat installed.

What you trade off

Two things the extension does that the bookmarklet cannot:

• Multi-page recording. The bookmarklet's injected script lives in the host page's JavaScript context. When you click a link and the page reloads, that context is destroyed; the script evaporates. The extension's content script lives in an isolated world bound to the browser tab, so it survives navigations. If your walkthrough needs to span multiple pages on the host site, use the extension. If it lives on a single-page app that uses client-side routing (React Router, Next.js client-side navigation), the bookmarklet survives those.
• Pixel-perfect screenshots. The extension can call chrome.tabs.captureVisibleTab to grab pixel-accurate screenshots per step. The bookmarklet has no such API; playback for bookmarklet recordings relies on the seven-identifier DOM fallback chain to find the right element on a live page rather than rendering a captured frame.

For most walkthroughs — "how to do X in our app" where X happens on a single screen — neither tradeoff matters. The DOM-fallback playback is actually more resilient than screenshot playback because it adapts when the host site changes, where screenshots go stale.

What stays the same

The bookmarklet captures the same step structure and the same seven stable identifiers as the extension. Specifically:

• CSS selector (the most specific stable selector for the element)
• ARIA label (when present)
• ARIA role (button, link, textbox, etc.)
• Data attributes (data-testid, data-cy, anything with data-)
• XPath expression (full DOM path)
• Surrounding text content (parent and sibling text snippets)
• Relative position hint (which container, what nth-child, what neighbor anchors)

Playback uses the same fallback runtime regardless of where the walkthrough was recorded. A walkthrough captured by the bookmarklet plays back identically to one captured by the extension on the same page.

The five-minute path

Start to finish:

1. Drag the personalized bookmarklet to your bookmarks bar. Get yours from the walkthroughs dashboard; the public bookmarklet on /bookmarklet works for testing but the personalized one is what publishes into your account.
2. Navigate to the page you want to record. Bookmarklet works on any URL.
3. Click the bookmarklet. The Shadow DOM side panel slides in.
4. Highlight + describe each step. 800ms-debounce auto-save catches every keystroke pause.
5. Click Save in the panel. Walkthrough lands in your dashboard with a share URL.

Choosing between bookmarklet and extension on Chrome

If you're already on Chromium and you have the choice, the rule of thumb is:

• Use the extension when the walkthrough you're recording crosses page navigations on the host site (clicking a sidebar link to a different route, completing a form that submits to a new URL, anything where the URL bar's URL changes mid-recording).
• Use the bookmarklet when the recording stays on a single page or a single-page-app route (modals open and close, drawers slide in, but the URL doesn't fully reload). The bookmarklet is faster to set up — one drag instead of one extension install — and the recording fidelity is identical for single-page flows.

You can also have both installed. They don't interfere; only one runs per recording.

Recording a third-party tool

One unique advantage of the bookmarklet: you can record on any website. If you're explaining how to use a vendor's tool to your team, you don't need that vendor to have FoxChat installed. Click your bookmarklet on their tool's page, capture the steps, save. The walkthrough lives in your FoxChat account; the third-party site never sees FoxChat code persistently. (The runtime injects only for the duration of the recording session and clears itself when you save or cancel.)

After recording: same destination either way

Whether you recorded with the bookmarklet or the extension, the walkthrough lands in the same place: /walkthroughs. From there you can rename, change visibility, grab the share URL, copy the embed code, or generate a personalized playback bookmarklet. See sharing and embedding.