Flows docs are in early stages and not everything is documented yet. If you have any questions, please reach out to us hello@flows.sh.
Create flows
Steps editor

Steps editor

Flows Cloud comes with a no-code steps editor that allows you to create and manage your steps in a visual way.

Steps editor

Create a new step

To create a new step, click on the Add step button below the last step in the flow or hover between two steps and click on the the + button that shows up. After you pick a step type, you can start configuring it by clicking on the step card and editing the form that appears on the right side of the screen.

Steps editor

Pick a step type

The first thing you need to do is to pick a step type. This will define the behavior and the configuration of the step. The available step types are:

  • Tooltip - simple step that shows a tooltip on the screen pointing to an element
  • Modal - step that shows a modal with an overlay
  • Wait - step that waits for a user action to continue
  • Fork - step that splits the flow into multiple branches

Configure the step

Once you have selected the step type, you can start configuring the step. The configuration options will depend on the step type you have selected. For guides on how to configure each step type, check the Step types section in the sidebar or the links above.

Steps editor

Configure branches (optional)

By default, after a step is completed, the flow will continue to the next step. When a following step is a fork you need to create ways for the flow to continue to all possible branches. When editing a tooltip or modal step, you can point to different branches when setting up the Footer buttons. When editing a wait step, you need to specify the target branch for each wait option.

Create a fork

To create a fork, click on the Add step or + buttons in the step editor and select the Fork option.

By default a fork is created with two branches, you can add more branches by hovering to the right side of the fork boundary (the dashed line) and clicking on the fork icon that appears.

Steps editor

Step preview

When you have a step selected in the steps editor, you can see a preview of the step in the right side of the screen under the step configuration form. This will help you to visualize how the step will look like when the flow is executed. The preview is not interactive, but it will show you the content of the step and how it will be displayed on the screen.

Steps editor