Examples

Every example runs for real, in this page - the code beside it is exactly what produced it.

Simple walkthrough

A plain, 3-step walkthrough - no special options, just steps.

Workspace settings

Workspace name

Acme Inc.

Timezone

UTC-08:00 Pacific

const tour = createGlowTour();

const workflow = tour
  .create("welcome")
  .step({
    id: "workspace-name",
    target: "#workspace-name",
    title: "Start with the workspace name",
    content: "A step can target any element - this one points at a plain field.",
  })
  .step({
    id: "timezone",
    target: "#timezone",
    title: "Then the timezone",
    content: "Chain as many .step() calls as the tour needs.",
  })
  .step({
    id: "save-button",
    target: "#save-button",
    title: "A plain, non-interactive walkthrough",
    content: "No special options here - no allowInteraction, no custom behavior.",
  })
  .build();

tour.run(workflow);