How-tos

How-tos are step-by-step guides with screenshots: "How to add a contact", "How to export last month's invoices". You record one by doing the task once in your own app; Guidely writes an instruction for each step, takes the screenshots, and blurs sensitive details before anything leaves the browser. Then you polish it and share it, embed it, export it, or turn it into an interactive tour or a help article.

Recording

1. **How-tos → Record a how-to.** Give it a name if you like, choose the start page (any page of

   your app that loads the Guidely SDK) and the environment whose key that page uses.

2. Your app opens in a new tab with a recording bar at the bottom. Press **Start recording** and

   let the browser share this tab (Chrome and Edge preselect it; in Safari and Firefox pick the tab yourself). Choose Record without screenshots to skip sharing. While you record, the bar shrinks to a small red dot with the step count so it stays out of the screenshots; hover it for Pause, Done and Cancel.

3. Do the task. Every click on a button, link, tab or menu item, every field you fill in and every

   option you pick becomes a step. Steps appear in the dashboard as you go.

4. Hover the recording dot and press Done. You're back to editing.

Record more on a how-to adds steps to the end of it the same way.

A full page load (not a client-side navigation) stops screen sharing, because the browser ties it to the page. Steps are still recorded; press Resume in the bar to bring screenshots back.

The SDK must be a version with capture mode (@guidelytech/* with how-to capture, see sdk.md). Older SDKs ignore the recording link and the dashboard keeps showing "Waiting for your app…".

What is kept private

• Typed text is not recorded for password, payment-card, one-time-code and other sensitive fields,

  or for anything matched by your project's mask selectors or marked data-guidely-redact, nor when the value looks like a card or social security number. The step says "Fill in “Password”" instead. Other typed text (an email address, say) stays in the step's wording, so check it.

• In screenshots those fields and elements, and visible text that looks like an email address, a

  card number, a US social security number or a phone number, are pixelated in the browser before upload. The unblurred pixels never reach Guidely.

• In the editor, **Blur** lets you drag over anything else. The areas are pixelated on the server,

  the original screenshot is deleted from storage, and a linked help article is rebuilt with the new image.

Editing

• Click any text to change it: the title, the description and each step's instruction and note.

  Changes save when you click away.

• Drag the handle to reorder steps. **Add block** (or a step's ⋯ menu → Insert below) adds text,

  a heading, a tip or an alert. Only recorded steps are numbered.

• Each screenshot shows a highlight around the element you used. Turn **Highlight** off, **Zoom**

  in on the element, Move highlight, replace or remove the screenshot from the step's ⋯ menu.

• **Write it up with AI** rewrites the title, summary and step wording from what was recorded,

  keeping every step. It uses the project's Anthropic key (Scout settings) or the server's.

• Preview shows it as readers see it.

Sharing and exporting

• **Share → Anyone with the link can view** creates a public page at `/share/` that needs no

  sign-in, in your brand colour and name (Settings → Branding), and counts views (once per viewer every 30 minutes). Turning sharing off makes the link stop working; turning it back on revives the same link. Reset link issues a new one and breaks the old one and every embed.

• **Embed code** is an `