Designing User Flows

In this guide, we will explain, step by step, how to design a simple user flow using Studio.

After accessing the Studio, you should now see the node graph. The node graph provides a visual representation of all the user journeys within a Microapp.

Microapps are composed of nodes. Each node is a single step within the microapp flow and can be of two types:

• Messages (content, user prompts, or interactive elements)
• Actions (execution of workflows, logic, or integrations to 3rd party systems/APIs)

Let's walk through an example together, and a simple Microapp that has some welcome content, a main menu, and a flow for asking a user for their name and presenting it back to them.

First, we will click on the Welcome Node to edit the first step within our microapp. Then on the left panel, we will change the text to Hello world, welcome to my microapp and add two more content sections, an image, and a second message. as follows

Let's go ahead and upload an image onto our second content section, within the Welcome node. We can do this easily by clicking on the image section - this will launch a prompt allowing us to upload or select an image.

Since we don't have any images yet, let's go ahead and upload one (you can find a free sample here).

After uploading an image, we're able to select it and set it as the content for this section.

Now, let's edit the second message to ask the user a question What would you like to do?.

Once updated, the node's content should look similar to this:

Next, let's add an Interaction.

Interactions allow us to display interactive elements to end-users, such as buttons, carousels, listpickers, and much more.

Within our Welcome node still, let's add a button interaction.

Let's add an option labeled Continue and create a new node.

We can do this by typing Continue next to the Button Label field, clicking into the Link to field, and selecting the option to Create New Message/Action.

Once clicked, this will create a new node named Continue and automatically link it to our button as the destination. This means that if a user clicks on our button, they will be taken to the Continue node.

Let's now edit our new node, rename it, and ask the user to provide their name.

We can do this by clicking on the new node, and editing its details. Let's go ahead rename the node from Continue to Ask for name, and add a message that says What is your name?. After making these changes, the new node should look like this:

Now, this time, rather than presenting an interaction to the user, let's allow them to type their answer, so that they can respond with their name.

We can do this by selecting None within interactions, enabling the Text Field, and storing the response as a variable. We'll call this variable NAME.

Lastly, once again we'll click on the Link to field, and select Create New Message/Action to create a new node.

In this last node, we will present a user with their response and then return them back to our Welcome node.

Let's rename the new node to Response, and add the following text to the first text bubble Your name is {NAME}..

By wrapping a value inside curly braces {/} we can use variables within our text. This allows us to display the name that the user entered in the previous node, and display it back to them.

Lastly, for this new node, let's select Interaction None, disable the text field, and Link them back to our Welcome node.

And that's it, we've configured a simple user flow that displays a welcome message, an image, a button interaction. Our microapp then asks the user to enter their name, displays it back to them, and lastly returns them to the Welcome node.

The last step is to actually preview our Microapp and ensure that it runs correctly. We can easily run our microapp by clicking on the Preview button on the top right corner.

After a few seconds, a preview of your microapp will display, and you'll be able to interact with it and test the functionality.

You're now ready to publish your Microapp and make it consumable by end-users.