Use Laudspeaker with our React.js SDK
Learn how to create a Laudspeaker journey, create a sample component, and display and modify the component within a React app.
node
and npm
command line utilities installed. See the Node.js installation page for more informationSet 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.
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:
- Start Step: This step is created by default and is the entry point for a customer in a journey
- 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. - 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 theclick
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. - 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. - Wait Until: Drag another Wait Until onto the canvas, and configure it identically to the first wait until that you created.
- Jump To: Finally,
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
:
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:
Add the sample component to your app
These are instructions or content that only pertain to the third step.
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
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:
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!