SDK 2.4 · drop-in for any web app

Onboarding that explains itself.

One config file gives your product a welcome, a few questions, a spotlight on the button that matters, a celebration and a setup checklist. Tours, hints and analytics come along for the ride.

Scroll to watch a first-run play out
Welcome flowSpotlightsCelebrationsChecklistsHotspotsAvatar guideStrict toursCross-device progressFunnels

Most users decide in the first two minutes whether your product is for them. A blank dashboard doesn't help them decide. A guided first win does.

The FTUE kit

One config. A whole first run.

  1. 01

    Welcome

    A headline, one sentence and a visual that earns a "wow".

  2. 02

    Ask

    One to three short questions. The answers tailor everything after.

  3. 03

    Spotlight

    The real button that matters is lit up, and the rest is dimmed.

  4. 04

    Celebrate

    The first success gets a moment, using the user's own words.

  5. 05

    Checklist

    A tailored setup list and one-time hints on each new page.

Config, not code

Copy, questions and guides live in one file.

Product-specific copy is data. The behavior is shared. Swap the words and the buttons, and you have a new venture's first run.

  • Buttons carry data-ftue, the guide finds them
  • Your app reports "done" with ftueSignal()
  • State follows the user across devices
export function myConfig(): FtueConfig {
  return {
    id: "interlister",
    brand: { name: "InterLister" },
    welcome: {
      headline: ["One catalog.", "Every marketplace."],
      cta: "Let's get you started",
    },
    questions: [{ id: "intent", title: "What brings you here?" }],
    guides: [{ path: "/connect", selectors: ["[data-ftue=connect]"] }],
    tasks: (answers) => [/* tailored checklist */],
    events: { marketplace_connected: { completes: ["connect"] } },
  };
}

The tour engine

Everything a product tour should do, and a few things most don't.

Guided tours

Bound to a page pattern and started by a trigger: first visit, every visit, after a delay or from your code.

driver.js

Strict tours

The user can't close it or click away. It follows them across pages and restarts if left unfinished.

opt-in

Action steps

A step advances only when the user clicks the highlighted element, or types the exact value you asked for.

learn by doing

Checklists & hotspots

Pulsing beacons, one-off tooltips, a multi-step welcome modal and an avatar guide with expressions.

React or vanilla

Targeting

Show a tour by role, signup age, other tours completed, or any predicate you can write.

conditions

Remote tours

Edit tour copy and steps in PostgreSQL. No redeploy, and callbacks defined in code are kept.

manage.py

Skip & resume

An optional Skip points at your replay control, and resumeTour() picks up where they left.

forgiving

Themeable

A config object or CSS custom properties, plus per-tour popover classes. It looks like your product.

CSS vars

Optional backend

Self-hosted, and one line to mount.

The SDK works with no backend at all. Add FastAPI and PostgreSQL when you want tours stored centrally, progress synced across devices and events recorded.

BrowserSDK bundled in nginxone origin, no CORS FastAPIonboard_api router PostgreSQLtours · events
0analytics event types
0API endpoints to know
0event batching, plus on page unload
0line to mount the router

Funnels and completion rates, in SQL.

Every step shown, completed, skipped and abandoned is an event you can read back.

Welcome seen100%
Answered86%
Spotlight clicked64%
First win49%
Checklist done31%

Illustrative numbers.

Make the first minute count.

React or vanilla. Self-hosted. Your data stays yours.