This tutorial assumes you have the node and npm command line utilities installed. See the Node.js installation page for more information
1

Set up a component template

Start by creating a new component template in the Laudspeaker dashboard: Navigate to the Component Templates screen and click on Create Component Template in the upper right hand corner, then select a name for your template. We’ll call our template Favorite Letters. Then click Create.


Now,let’s add some fields and events to our template. Click edit in the top right corner, then add a field called my-favorite-letter with type String and default value ‘a’, and an event called click, and save the template.

2

Set up a journey

Now that we have a template for our component, it’s time to create the journey. Navigate to the Journey Builder screen and click on Create Journey in the upper right hand corner, then select a name for your journey. We’ll call ours Letters. Save the template and you should be redirected to the journey builder page for the journey.


Our journey will have six steps:

  1. Start Step: This step is created by default and is the entry point for a customer in a journey
  2. Custom Component: Drag a Custom Componenet step from the left hand menu into the journey builder canvas, into the outline directly below the start step. When the sidebar menu pops up, select the Favorite Letters template from the dropdown, and click save.
  3. Wait Until: Now, drag a Wait Until step from the left hand menu into the journey builder canvas, into the outline directly below the Custom Componenet step. When the sidebar menu pops up, select Tracker in the first Branch 1 Event dropdown menu. There should only be one option in the TrackerId menu; select it. Finally, select the click event from the Event Name dropdown. Click the save button immediately below the dropdown menus to save the branch, then click the Save button at the bottom of the sidebar menu to save the wait until step.
  4. Custom Component: Again, drag a Custom Componenet step from the left hand menu into the journey builder canvas, into the outline directly below the wait until step. When the sidebar menu pops up, select the existing tracker option, and change my-favorite-letter to b, and click Save at the bottom of the sidebar menu.
  5. Wait Until: Drag another Wait Until onto the canvas, and configure it identically to the first wait until that you created.
  6. Jump To: Finally,
3

Create the React App

Now we are going to create a React app using a Vite template. In the terminal, navigate to your desired workspace and create a new app using npm:

$ npm create vite@latest my-favorite-letter -- --template react
4

Install the Laudspeaker React SDK

The easiest way to get started is to use the @laudspeaker/react client library, which provides a convenient interface for working with Laudspeaker from a React app. Naviagte to the newly created app and install the library:

$ cd my-favorite-letter && npm install --save @laudspeaker/react
5

Add the sample component to your app

These are instructions or content that only pertain to the third step.

6

Start the journey

These are instructions or content that only pertain to the third step.

​
1) Set up a Laudspeaker journey and sample component template

Start by creating a new component template in the Laudspeaker dashboard: Navigate to the Component Templates screen and click on Create Component Template in the upper right hand corner, then select a name for your template. We’ll call our template Favorite Letters. Then click Create


​
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:

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

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:

We then create the template like this:

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:

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!