How to Create Branching Logic
With some HTML, you can add links to different steps within a flow. By leveraging this feature, you can create branching logic that customizes what people see by the choices they make.
Buttons in modals and slideouts are set up to proceed to:
- The next data step (for next buttons)
- The end a flow (for the last next button in a flow), or
- The previous step (for back buttons)
Flows start at data-step 0 and follow an ascending order.
Here's an example of the data step for the next button on data-step 0 of a 3-step flow:
Here's another example of what the HTML looks like:
<a data-step="3">Go to step 4</a>
Simply replace "4" with the step in the flow you want visitors to go to. This can be a later step (e.g. for jumping from step 1 to step 3) or a previous step.
To end a flow entirely, you can use this HTML:
<a data-step="end">I'll pass, thanks!</a>
Example: Persona-based onboarding
In this example, we'll create a custom onboarding flow for two different types of personas: developers and designers. To do that, we need to figure out which persona our visitors identify with, then show them tailored content based on that.
Step 1: Create a 4-step flow.
Our flow is going to have 4 steps:
- A step with two links asking users whether they're a designer or a developer.
- A step customized for designers.
- A step customized for developers.
- A summary step that both designers and developers will see.
Step 2: Hide the default buttons
The default buttons on a flow only progress forward and backward, but we want ours to jump to different steps. We also want to control the presentation a bit, so we're going to create our own buttons.
See the article about hiding buttons.
Step 3: Link your steps
On step 1, we're going to switch to the HTML editor and add our "jump" links:
<a data-step="2">I'm a designer</a><br><a data-step="3">I'm a developer</a>
Now, if someone clicks on "I'm a designer," they'll be taken to step 2 in our flow. If they click, "I'm a developer," they'll land on step 3. You can further customize what these links look like using CSS.
We'll also want to go to step 2 and step 3 and create similar links to step 1 and step 4. Here's an example of what the content would look like on step 2:
<p>Welcome, designer! Pixels, amirite?</p> <a data-step="4">Yup, that's me! Let's get going.</a> <a data-step="1">Actually, I'm not a designer. Let me go back.</a><br>
The above gives them an option to go back to step 1 in case they made a mistake, and if they didn't we skip them to the final step. This is important because we're currently on step 2 and don't want to accidentally end up on step 3, which is meant for developers only.
Show us your branches
Doing something cool with branching logic? We'd love to see it! Email firstname.lastname@example.org to give us your feedback and inform us of how we could make this better for you and your team.