# First-Run Onboarding

> Show a Driver.js tour once, on a user's first visit, remember that they've seen it, and give them a button to replay it.

Use this for the welcome tour new users should see once. The tour starts on the first visit, never comes back on its own, and a button replays it on demand.

Load the page below, close or finish the tour, then load it again.

```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const SEEN_KEY = "onboarding-seen";

const tour = driver({
  showProgress: true,
  steps: [
    { element: "#projects", popover: { title: "Projects" } },
    { element: "#invite", popover: { title: "Invite" } },
    { element: "#replay-tour", popover: { title: "Replay" } },
  ],
  onDestroyed: () => localStorage.setItem(SEEN_KEY, "1"),
});

if (!localStorage.getItem(SEEN_KEY)) {
  tour.drive();
}

document
  .querySelector("#replay-tour")
  .addEventListener("click", () => tour.drive());
```

- `onDestroyed` runs however the tour ends, so closing it early counts as seen too. To show it again until it's finished, save only when `reason` is `"done"` (see [Track Tour Analytics](https://driverjs.com/docs/track-tour-analytics.md)).
- For signed-in users, save the flag on the user record instead, so it follows them to other devices.
- Start the tour once the page has rendered. In React or Vue, see [React and Vue](https://driverjs.com/docs/react-and-vue.md).

**Uses**: [`drive()`](https://driverjs.com/docs/api.md#starting-and-stopping), [`onDestroyed`](https://driverjs.com/docs/configuration.md#hooks), [`showProgress`](https://driverjs.com/docs/tour-basics.md#tour-progress)