kbc-onboarding

A manager for user onboarding gamification.

Setup

This package provides a context with a global OnboardingManagerProvider that you can use to trigger onboarding actions.

To set it up, add the following provider:

import { OnboardingManagerProvider } from '@kano/kbc-toast';

const onboardingManagerConfig = {
    KB_APP_NAME: config.KB_APP_NAME,
    KB_KANO_WORLD_URL: config.KB_KANO_WORLD_URL,
};

ReactDOM.render(
    <OnboardingManagerProvider providerConfig={onboardingManagerConfig}>
        <App />
    </ToastManagerProvider>
);

How to initiate onboarding

Onboarding is initiated via calling its init() method within the app as you can then add aditional logic such as "don't initiate unless a user has logged in and after the app has fully loaded".

import { withOnboardingManager, IOnboardingManagerAPI } from '@kano/kbc-onboarding';

interface ComponentProps extends IOnboardingManagerAPI {
    user: string;
}

const Component = withOnboardingManager(({ user, onboardingManager }: ComponentProps) => {
    useEffect(() => {
        if (user) {
            onboardingManager.init();
        }
    }, [])

    return <div className="main">...</button>;
});

NOTE: The init() method also allows an optional step argument so you can pass through a step that you want to complete immediately on load. I.e if just visiting an app consists of a step then complete when the app loads and we initiate onboarding.

## How to complete a step

The onboarding consists of multiple steps, most of which are defined in our gamification engine. Users can complete these steps in a multitude of ways. See below for an example:

Example:

import { withOnboardingManager, IOnboardingManagerAPI } from '@kano/kbc-onboarding';

interface ComponentProps extends IOnboardingManagerAPI {
    prop: any;
}

const Avatar = withOnboardingManager(({ user, onboardingManager }: ComponentProps) => {
    return <button className="save-my-avatar" onClick={() => onboardingManager.completeStep('avatar');}>Save</button>;
});

Telemetry

The onboarding manager tracks a users progression via our telemetry system. These are the event names:

| Event / Error Name | Data | | --------------------------------| ----------------------------------| | onboarding_initiated | data: { currentStep, stepNumber } | | onboarding_dismissed | data: { currentStep, complete } | | onboarding_complete_step | data: { step, stepNumber } | | onboarding_unlock_loot | data: { loot } | | onboarding_all_steps_completed| data: { step } | | onboarding_goto_step | data: { currentStep, gotoStep } | | onboarding_gotonext_step | data: { currentStep, nextStep } | | onboarding_gotoprev_step | data: { currentStep, prevStep } |