Button

Button is element which controls actions on the page. You can have one, or multiple which then defines number of page outputs in the Flow.

📘

Default Button

If no custom element Button is specified, there is always default Continue rendered on the Page in case there is next page in the Flow available


We have two main styles

  • Button : Will render graphical Button as per page layout
  • Link : Will render textual link on the page

and two main actions:

  • Continue : Will move to the next page in the flow definition
  • External link : Will open new tab and load external URL

Example

Outputs and buttons are usually used together with Condition Settings to achieve desired results. We'll keep it as simple here as possible.


Simplified scenario for this example:

  • Flow which gathers T&C consent for US citizens in order to continue.
  • Flow have different route for Foreigner customers with different data.

Step 1:

  • Create a page with
    • Header
    • Paragraph
    • two checkboxes
      • Consent (can be Legal Agreement as well)
      • US citizenship
    • four Buttons
      • three Buttons
      • one Link

Step 2:

  • Define outputs of the Page (let's Use Link button as default). In this example We will have four outputs for diversion of the flow based on user action.

Step 3:

Structure Page like this and assign Buttons their respective outputs by clicking "Use this output" per each Button. Link will be using default as it will be action without any condition.

Step 4:

Add conditions to each of the Buttons like this:

Button "i do agree"

-> Click "edit" -> Condition Settings -> clidk "edit" -> click "add condition"

👍

Explanation:

Button will be visible only when this condition will be fullfiled - in this case Consent checkbox will be checked.


Button "No consent"

-> Click "edit" -> Condition Settings -> clidk "edit" -> click "add condition"

This button needs 2 conditions which need to be fullfilled together so the button is not shown as second on very same page as previous one.

👍

Explanation:

We want to show this button only when user is US citizen and Consent is not yet checked or will not be checked at all - we will direct flow to different output.


Button "not US citizen"

-> Click "edit" -> Condition Settings -> clidk "edit" -> click "add condition"

👍

Explanation:

Simple rule to show this button only when US citizenship checkbox is not yet checked.

Step 5:

  • Create four ending pages like this, You can use Thank you interaction or Page or Text Page, as you like


End result without any other customizations will look like this. Each button will divide flow to different route as per definition. Your options are endless!