No extension required

FoxChat bookmarklets — record + play walkthroughs in any browser

Drag two buttons to your bookmarks bar. Click them on any site to record a walkthrough or play one back. Works in Firefox, Safari, corporate-managed Chrome, and any environment where you can't install browser extensions.

01 / Record

Record walkthrough

↓ drag this to your bookmarks bar ↓ + Record walkthrough

Click on any site → highlight + describe each step → auto-saves to your dashboard. Generate your personalized recorder bookmarklet (it embeds your site_id + access token).

02 / Play

Play walkthrough

↓ drag this to your bookmarks bar ↓ ▶ Play walkthrough

Replace YOUR_WALKTHROUGH_ID with the UUID of any published walkthrough. Use the share page to grab a personalized bookmarklet that pre-fills the ID.

Install in 30 seconds

Step 1

Show the bar

Press Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to reveal your browser's bookmarks bar.

Step 2

Drag a button

Click and hold the orange or cyan button above, drag it onto your bookmarks bar, release. The bookmarklet is now installed.

Step 3

Visit any site

Navigate to the site you want to record or play a walkthrough on. The bookmarklet works on any domain (subject to that site's CSP — see FAQ).

Step 4

Click the bookmarklet

The FoxChat toolbar appears. Recorder bookmarklet → highlight, describe, save. Player bookmarklet → walkthrough overlay opens.

Why a bookmarklet?

The FoxChat Chrome extension is the smoothest path — multi-page recording across navigations, screenshot capture via privileged APIs, side-panel UI bound to the browser chrome. But not everyone can install Chrome extensions:

The bookmarklet path covers all of these. Same Shadow DOM side panel, same numbered cyan badges, same pulsing label, same connector line, same Save Step button, same per-step auto-save (800ms debounce), same 0-step rejection on the server.

Recording fidelity: the bookmarklet captures the same DOM identifiers (CSS selectors, ARIA labels, data attributes, XPath, text content, surrounding text, position hint) the extension does. Playback adapts when the host site's UI changes — same as walkthroughs recorded with the extension.

Bookmarklet vs. Chrome extension

Chrome extension

Best when you can install it

  • Multi-page recording across navigations
  • Pixel-perfect screenshots via chrome.tabs.captureVisibleTab
  • Native side panel bound to the browser chrome
  • Works on Chrome, Edge, Brave (Chromium-based)
  • Same recorder UI, same selectors, same fidelity
Bookmarklet

Best when you can't

  • Single-page recording (re-click bookmarklet on each page)
  • Metadata-only frames (renderer falls back to selector-targeted highlight rings)
  • Shadow DOM toolbar + side panel injected into the host page
  • Works in Firefox, Safari, locked-down Chrome, any browser with a bookmarks bar
  • Same recorder UI, same selectors, same fidelity
  • No multi-page recording — bookmarklet evaporates on link click
  • No screenshots — playback adapts via DOM selectors instead

FAQ

I'm on locked-down Chrome at work. Will the bookmarklet still work?

Almost always, yes. Bookmarklets are just bookmarks with a javascript: URL — IT policies that block extensions usually don't touch bookmarks. If your bookmarks bar is hidden by policy, you can also paste the bookmarklet URL directly into the address bar to run it once.

If you can install bookmarklets but the bookmarklet's loaded script is blocked by Content-Security-Policy on the site you're recording, see the next FAQ.

What if a site has strict Content-Security-Policy?

Some sites (banks, GitHub, large SaaS apps) block third-party script injection via CSP script-src. When that happens, the bookmarklet shows a red toast: "Could not load FoxChat recorder. This site may have a strict Content-Security-Policy."

Workarounds: record the same flow on a less restrictive page (e.g., a staging environment), use the Chrome extension on a personal Chrome profile, or open the site through a CSP-bypassing dev proxy. We track CSP-blocked recordings as a metric so we know which customer sites need a workaround.

Does it work in Firefox?

Yes. The bookmarklet uses standard DOM APIs (Shadow DOM, fetch, CustomEvent) — no Chrome-specific APIs. Recording fidelity is identical to Chrome. The only browser-specific limitation is that some Firefox versions intercept the beforeunload dialog (the unsaved-step warning), in which case auto-save still fires per step so nothing is lost.

Does it work in Safari?

Yes, with one caveat: Safari's intelligent tracking prevention can block the auth token from being read out of localStorage on the FoxChat dashboard, so you may need to re-generate the bookmarklet from /walkthroughs more often. Recording works the same.

Will my recordings replay correctly when the site's UI changes?

Yes. We capture seven stable identifiers per element (CSS selector, ARIA label, ARIA role, data attributes, XPath, surrounding text, position hint) and the playback runtime falls back through them in priority order. UI redesigns that swap class names or move elements within their container don't break playback.

Does the bookmarklet have feature parity with the extension for playback?

The bookmarklet player at /bookmarklet/playback.js renders captured frames, narration text, narration audio, prev/next/replay/restart controls, and Shadow DOM CSS isolation. It does NOT render background music or the lead-modal end screen — those live on the FoxChat-controlled /embed/<id> player. If you need the full player, share https://app.getfoxchat.com/embed/<walkthrough_id> instead.

What happens if I close the tab mid-recording?

Auto-save fires after every step (800ms debounce, mirrors the Chrome extension behavior post-2a53484). The most you can lose is the in-flight step you were captioning when you closed the tab — and even that is persisted to localStorage as a last-resort snapshot you can recover from in the dashboard.

How is the bookmarklet different from screen recording?

Screen recordings produce video — visitors watch a fixed-frame replay that doesn't adapt when your UI changes, doesn't translate, and isn't searchable. FoxChat walkthroughs are step-by-step with stable selectors: when your UI changes, the walkthrough still works; visitors can pause, rewind, search the narration, and translate captions.

Ready to record without installing anything?

Generate your personalized bookmarklet (with your site_id + access token pre-filled) on the walkthroughs page.

Go to /walkthroughs