This tutorial will show with a very simple application, how to use the react sdk, how to create and connect a journey, and how a react component connects to the laudspeaker platform.

​
Setting up the app

Simply clone the project from our github repository here https://github.com/laudspeaker/react-toy-app .You’ll need to do is change the api key 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:

1

The current name is the state we will share with Laudspeaker, and we will change this state in a Laudspeaker journey, when a user clicks on the send click button in the application

​
Understanding the application

If you navigate to the Banner.tsx file you will see how a component connects to Laudspeaker.

Our sdk is used in this file in the following line:

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

The Banner component shares state like this:

const { state, emitTrackerEvent } = useTracker('receptive-farm-8063');
    const onClick = () => {
        emitTrackerEvent('click');
    }

The component emits and event that we can use on the Laudspeaker platform. In this case we call that event click but you could name it whatever you wanted

useTracker('receptive-farm-8063') identifies the component in our journey. The string receptive-farm-8063 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.

​
Creating and starting our journey

We will now create a journey so that when a user clicks on the send click button on your app, the name field of the banner will change state. You can change the value to whatever you want, in this tutorial we will simply toggle between a and b

2

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

3

We then create the template like this:

4

Now we can go to the journey builder. In our journey, we set the state of the name to be a initially. Then we wait until a user clicks on the button and emits a click event, which then changes the state of name to b. We then wait until there is another click event and loop back to the state a

This logic is represented by the following journey:

5

Here is a video showing how to build journey from scratch

​
Putting it all together

Set the journey live, and then re-start the app. Now when you click on the button, it should change state!

This tutorial shows how the basic ideas behind Laudspeaker work in practice.

Real onboarding components, can have as many fields and actions as you want and Laudspeaker can flexibly power many different types of experiences!