@kano/kbc-onboarding

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 }