Onboarding Config

The heart of any OnboardingJS flow is its configuration. This is where you define the structure, content, and logic of your user onboarding experience. The primary configuration object is passed to the OnboardingEngine (directly or via the OnboardingProvider in React).

Main Configuration Object OnboardingEngineConfig

The OnboardingEngineConfig is an object that brings together all aspects of your onboarding flow. Here are its key properties:

1// Example: onboarding-config.ts
2import { OnboardingEngineConfig, OnboardingStep } from "@onboardjs/core";
3
4export const myAppOnboardingConfig: OnboardingEngineConfig = {
5  // 1. Define your steps (see next page)
6  steps: [ /* ... your step objects ... */ ],
7
8  // 2. (Optional) Tell it where to start
9  initialStepId: "welcome", // The 'id' of your first step
10
11  // 3. (Optional) Actions when things happen
12  onFlowComplete: (context) => {
13    console.log("All done!", context.flowData);
14    // Example: Mark onboarding as done for the user
15  },
16  onStepChange: (newStep, oldStep) => {
17    console.log(`Moved from ${oldStep?.id} to ${newStep?.id}`);
18  },
19
20  // 4. (Optional) Initial data for your flow
21  // initialContext: {
22  //   flowData: { userSegment: 'trial' }
23  // }
24};

The context and flowData

Throughout your onboarding, OnboardJS maintains a context object. A special part of this is context.flowData.

• context.flowData: This is your scratchpad!
  • Store answers from questions (e.g., context.flowData.userRole = 'developer').
  • Track progress or choices.
  • Use it in condition functions to show/hide steps.
  • Use it in nextStep functions for dynamic routing.