Creating Branching Logic
With some HTML, you can add links to different steps within a group of modals or slideouts. 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 of a flow (for the last 'next' button in a flow), or
- The previous step (for 'back' buttons)
Behind the scenes, flows within a group 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.
If you'd like to remove the buttons that are present in the modal, use the options in the editor to remove the previous and next buttons (you'll need to do both), to direct attention to the buttons you've added in.
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.
There are some limitations to branching logic:
- You can only skip around to different steps within the same modal or slideout group.
- If your flow contains multiple patterns, you will not be able to skip from one pattern group to another, including modal to slideout or vice versa.
- Data-step end will complete the step group, not the entire flow.
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.