This tutorial will show with a very simple application, how to to set up an onboarding checklist in an application, as well as set up an accompanying user journey in laudspeaker’s platform

​
Setting up the app

Simply clone the project from our github repository here https://github.com/laudspeaker/side-checklist . All, you’ll need to do is change the api key and the host url and the application should work as intended. Then go ahead and run two commands

npm install 

npm run start

If you navigate to localhost on your browser the application should look like this:

You should be able to click on the different buttons and minimize the checklist:

​
Understanding the application

The relevant Laudspeaker code lies in two places, src/App.tsx and src/components/SidePanel/SidePanel.tsx

App.tsx contains

import { LaudspeakerProvider } from "@laudspeaker/react";

    <LaudspeakerProvider
      apiKey="hVHfu34n7vLgDx8UxkH9pB2ht3TH5nwZF6rSJhfm"
      apiHost="https://staging-app.laudspeaker.com"
    </LaudspeakerProvider>

Which is where you will want to set your api key and the apiHost should be changed to “https://api.laudspeaker.com”

SidePanel.tsx is where the checklist resides, and contains more code:

import { useTracker } from "@laudspeaker/react";

const { state, emitTrackerEvent } =
    useTracker<OnboardingTracker>("wacky-place-6727");

useTracker is the hook we use to share state with Laudspeaker. useTracker('wacky-place-6727') identifies the component in our journey. The string wacky-place-6727 is randomly generated by Laudspeaker in the journey (shown in the next section). You will need to update the string with the whatever string is generated on your journey.

In this example each checklist item has a title, description, button text, and action as shown here:

interface StepFixture {
  title: string;
  description: string;
  buttonText: string;
  buttonAction: () => void;
  done: boolean;
}

The button actions correspond to state transitions emitTrackerEvent in Laudspeaker, that we capture with an emit event, and are used in the journey builder.

​
Creating and starting our journey

We will now create a journey so that when a user clicks on an item it is completed.

So that Laudspeaker recognizes the checklist component, we need to define the checklist component’s fields and events in Laudspeaker. To do that we go to the tracker template section of Laudspeaker:

We then create the template like this:

Now we can go to the journey builder. The end result should look like this:

The core pattern is a component, and then a wait until some action occurs. For each component step, you will want to fill out the values of the field, like this:

followed by the wait until that matches the emited action on that checklist button click like this:

​
Putting it all together

You can see the complete journey as one of the pre-made templates on your Laudspeaker account, and can change the fields and actions as you wish!