Create flows
Steps editor

Steps editor

Flows come with a no-code editor that allows you to create and manage your onboarding flows without writing any code.

Flows 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 + 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.

Add step illustration

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
  • Banner - step that shows a banner in a corner of the screen
  • 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.

Step form illustration

Configure branches (optional)

By default, after a step is completed, the flow will continue to the next step in the sequence. When a following step is a fork, you need to create ways for the flow to continue to all possible branches.

You can configure target branches in two main ways:

  • After clicking next step button: When editing a tooltip or modal step, you can point to different branches when setting up the Next step button. Learn more
  • After waiting for user action: When waiting for a user action, you can specify the target branch for each wait option. Learn more

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.

Add fork illustration

Add branches to a fork

To add more branches to a fork, hover to the left side of the fork boundary (the dashed line) and click on the fork icon that appears. This will add a new branch to the fork with a tooltip step.

Add branch illustration

Step preview

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

Step preview illustration