Intro flow

Access: startiapp.IntroFlow

By default the intro flow opens by itself as soon as the app loads, and you never have to touch this. Turning Trigger on in the starti.app Manager holds it back instead: nothing appears until you call show().

That setting moves the trigger point and nothing else. Which steps a given user still has to see, in what order, and what each one does is decided exactly the same way either way.

Methods

show(): Promise<boolean>

Shows the intro flow now.

Returns: true once the flow is on screen. false if there was nothing to show — this user has already been through every step — or if a flow is already up.

Resolving does not mean the user finished the flow, only that it was put in front of them. Listen for the introFlowClosed event to know when they are done with it.

Example:

startiapp.addEventListener("ready", async () => {
  await signIn();
  await startiapp.IntroFlow.show();
});

isPending(): Promise<boolean>

Whether calling show() right now would put anything on screen — so false both when this user has seen every step and when a flow is already up.

Answering needs the record of what this user has already seen, which lives in native storage, hence the promise. Nothing is shown as a side effect of asking.

Returns: true if this user still has steps left to see.

Example:

// Only dim the page for an intro flow that is actually going to appear.
if (await startiapp.IntroFlow.isPending()) {
  document.body.classList.add("dimmed");
  await startiapp.IntroFlow.show();
}

Events

The flow dispatches these on document rather than on startiapp.IntroFlow, so they reach you wherever it happens to be mounted.

introFlowLoaded

Fired once the flow has worked out what this user still has to see and put it on screen.

Event data: void

Example:

document.addEventListener("introFlowLoaded", () => {
  console.log("The intro flow is up");
});

introFlowClosed

Fired when the user has been through the last step and the flow has been taken off screen.

Event data: void

Example:

document.addEventListener("introFlowClosed", () => {
  startTheTour();
});