Examples¶

These pages show every kind of content Guidepost can author, each with a worked example and screenshots. All of the examples run against one small reference application, Northbridge Claims, which ships in the repository as demo-app/. You can run it on your own machine, load the example content into the studio and look at each piece working on a real page.

The examples are written for people who have not used the product before. Each page says what the content is, when to use it, how to build the example in the studio, what the user sees, and what to watch for.

What each kind is for¶

Kind	What it is	Page
Walkthrough	A guided tour: a tooltip per step, anchored to an element, advanced by the user or by what they do	Walkthrough
Process	A multi-stage journey built from walkthroughs, with a stepper and resume	Process
Field tips	Hints and validation messages attached to form fields	Field tips
Launcher	A persistent help control placed next to an element	Launcher
Hotspot	A pulsing marker that draws the eye to something new	Hotspot
Announcement	A message as a modal, banner or toast	Announcement
Checklist	A task list whose items tick when the user does the work	Checklist
Resource center	The panel behind the help bubble: help, tasks and search	Resource center
Document link	A link to a PDF or a web article, attached to a step or listed in the resource center	Document link

The side panel, where all of this is authored, has its own page: Studio tour.

I want to...¶

I want to...	Use this
Teach a new user how a screen works, step by step	Walkthrough
Guide someone through a long job that spans several stages or pages, and let them resume	Process
Explain a field, or stop a bad value before the form is submitted	Field tips
Give people a way to ask for help from the place they are stuck	Launcher
Point out one new setting or button without interrupting the user	Hotspot
Tell everyone about a release, a change of rule or a maintenance window	Announcement
Onboard a new person with tasks that tick themselves	Checklist
Put tours, documents and search behind one help button	Resource center
Link a step or a help list to a handbook or an article	Document link

Load the demo¶

You need the extension built and loaded in the browser first. The root README has the full procedure under Run it locally, step by step; turn on author mode in the options page as that section describes.

Start the reference application from the repository root:
```
pnpm demo
```
It listens on http://localhost:5200. Leave it running.
Open http://localhost:5200 in the browser tab you will work in.
Open the studio from the toolbar icon, with Open Authoring Studio. Set the application key to northbridge.
Under Bundles, choose Import and select demo-app/northbridge-demo.guidepost.zip. The report lists the sixteen items that were imported.
Press Use the open site and accept the permission prompt. Nothing runs on a site you have not granted.
Reload the tab. The help bubble appears in the bottom corner, the dashboard shows the What is new modal, and every other example is on the page named in its section below.
To see one piece of content on demand, open it in the content list and press Preview all, or Preview from here on a single step. Preview runs the draft whatever its trigger or frequency, and does not record progress.

Note

Each content item remembers what you have seen. A modal that is set to show once will not show again until you clear the extension's data or import a new version. When you want to see an example again, use Preview.

Where each example runs¶

Page in the demo	Examples on it
Dashboard `/`	What is new modal
Claims `/claims`	Launcher beside the search box
New claim `/claims/new`	Walkthrough, process, field tips, the New claim section of the resource center
Claim detail `/claims/CLM-20418`	Status reminder toast
Settings `/settings`	Hotspot, the assignment email walkthrough
Help `/help`	Maintenance banner, the handbook and article links
Every page	Help bubble and resource center, onboarding checklist

Rebuilding the demo content and screenshots¶

The example content is TypeScript under demo-app/content/, built with the same factories the tests use. Locators for each named element are captured against the running demo application, so they are real.

pnpm demo:anchors            # recapture locators after editing the demo HTML
pnpm demo:bundle             # rewrite demo-app/northbridge-demo.guidepost.zip
pnpm examples:screenshots    # regenerate every image on these pages

The screenshot command builds the development flavour of the extension, serves the demo on port 5200, imports the bundle through the studio and saves each image to site/docs/assets/examples/. It can be run repeatedly and overwrites the images in place. See the notes on the studio tour before running it, because the studio screenshots change whenever the side panel changes.

Gotchas¶

The demo uses http://localhost:5200. The bundle's environment origin is that address. Run the demo on another port with PORT=5300 pnpm demo only if you also edit the origin in the application settings.
The handbook link opens a one-page PDF that the demo server generates. It is a placeholder, not a real handbook.
Locators in the bundle were captured on the demo as it ships. If you change the demo HTML, run pnpm demo:anchors and pnpm demo:bundle, or the examples will stop finding their elements.