Walkthrough editor¶

A walkthrough is an ordered list of steps tied to page patterns. The editor opens from New content, then Walkthrough. A Process is the same editor with a stepper style for multi-stage flows.

Walkthrough fields¶

Field	Notes
Name	Shown in lists and the resource centre
Page patterns	Where it can run. See triggers and frequency for the pattern syntax
Trigger	Defaults to page load. See the triggers page for the rest
Schedule	Optional start and end dates (whole days, inclusive, local time)
Show progress, progress style	Counter, bullets or bar
Allow skip	Shows a Skip control
Frequency	once, once-per-version, every-visit, until-completed, manual-only

The toolbar has Pick element, Record steps, Stop, Add dialog step, Preview all, End preview, Save draft and Publish (with an optional change note). A Checks panel lists errors and notes. Errors block Publish.

Steps¶

Each step has an anchor (the element), content (title and Markdown body), a display type, a focus mode, up to three buttons, an advance condition and a hint for what to do when the element is missing. Steps can be reordered with Up and Down. Per-step Preview from here runs the tour starting at that step. A step may also carry its own page pattern and documentation links (with a New link shortcut).

Add dialog step adds a step with no anchor, for a welcome or closing message.

Display types and the focus modes they allow¶

Display	Focus modes offered
`tooltip`	none, spotlight, block-outside
`hotspot`	none, spotlight
`inline-hint`	none
`modal` (sm, md, lg)	modal, none
`slideout` (left, right)	none, modal

Spotlight cuts a hole in a dimming layer around the anchor. Block-outside leaves the page visible but stops clicks outside the anchor. Modal puts the page behind a backdrop.

Tooltip steps also accept a width from 160 to 640, a cutout padding and radius from 0 to 64, and an overlay-click behaviour: none, dismiss or shake.

Hint positions¶

Inline hints take a position: auto, below, above, after-end or before-start. Content saved with the older value after is read as after-end.

Buttons¶

Up to three per step. The studio offers six actions: start-content, open-resource, open-url, open-resource-center, dismiss and acknowledge. The schema also defines next, back, snooze and go-to-step; hand-edited bundles can use them, the studio form does not.

Advance conditions¶

The schema supports next-button, click-anchor, input-anchor, element-appears, element-disappears, page-matches, form-submitted and any. The studio offers only the first three, and only next-button for dialogs and slide-outs.

When the element is missing¶

onMissing is skip, end, show-unanchored or pause. The runner waits for the element, polling with a mutation observer plus a 250 ms interval, before it applies the rule.

Media and translations¶

Step media can be a video (YouTube, Vimeo, Microsoft Stream or an mp4 file; the provider is guessed from the URL) or an uploaded image with alt text. A Translations editor holds per-locale UI strings.

Worked example¶

A three-step claim intake tour:

Record steps, clicking New claim, the Policy number box and Submit.
Set step 1 to tooltip with spotlight. Title: "Start here". Body: "Create the claim before you collect documents."
Set step 2's advance to input-anchor so the tour moves on when the user types.
Set step 3's button to open a documentation link.
Preview all, then Publish with the change note "Intake tour v1".

Gotchas¶

The studio exposes three of the eight advance conditions, and has no branching UI, although the schema has branch and go-to transitions. Hand-edited content that uses them runs but cannot be edited visually.
A step shows a fragile badge when it has fewer than two locator strategies. Treat it as a request for a data-testid.
Preview does not write progress and emits no events, so a preview never changes what a real visitor sees.
Publishing is blocked while a validation rule's regex does not compile. At run time a broken regex passes everything.