Guide branching lets you design personalized flows in a single guide by routing visitors to different steps based on whether a specific element or Feature is present on the page. This allows you to deliver more targeted onboarding, education, and engagement experiences from a single guide.
Use cases
Guide branching is most useful when you want to show different steps based on user input or conditions. For example, you can:
- Show a different step based on whether a specific field or component exists in the user interface (UI).
- Guide users to different outcomes depending on which Features or elements are available.
- Use the step map to review how visitors move through the guide flow.
Branching is configured through button actions and visualized in the step map in the Visual Design Studio. This helps you understand how steps are connected and keep guides with multiple paths organized.
Requirements
To use guide branching and the step map, you must:
- Use the Visual Design Studio.
- Have guide editing permissions.
Set up a guide branch
You can branch a guide based on whether a specific element or tagged Feature is present on the page. This lets you personalize the guide experience to what a visitor sees in the user interface, like showing a different step depending on whether a form field is available.
You can configure branching either from the designer or from the step map in the Visual Design Studio. The step must already include a button to add a conditional split.
In the designer
- Create or open a guide you want to branch in the Visual Design Studio.
- Open a step that includes a button.
- Select the button, then choose Conditional Split as the action.
- Select Configure split.
- Optionally, enter a name to describe the condition.
6. Under Location, choose whether to branch based on the presence of an element or tagged Feature on the page.
- If splitting using an element, select Select element, then enter or choose the relevant selector in your application.
- If splitting using a tagged Feature, select Feature, then choose the relevant Feature from the dropdown menu. You can also select Select feature and choose the relevant Feature directly within your application.
7. Under Condition Behaviors, define the behavior for each condition by choosing what action should occur if the selected element or Feature is and isn’t found on the page. Available actions include:
- Next Step
- Dismiss Guide
- URL Link
- Launch Guide
- Snooze Guide
- Go to Step
- Previous
8. Select Done, then save the guide. Alternatively, you can choose Edit in step map to visualize the branching of the flow. For more information, see In the step map.
9. Repeat these steps for each branch you want to create for this guide.
10. Test the branched experience using Preview, then publish your guide when you’re ready.
In the step map
- Create or open a guide you want to branch in the Visual Design Studio.
- Select Step Map from the top action bar.
- Select the step or action that you want to apply the split to.
- For the button action, select Conditional Split.
- Under Location, choose whether to split the guide based on the presence of an element or tagged Feature on the page.
- If splitting using an element, select Select element, then enter or choose the relevant selector in your application.
- If splitting using a tagged Feature, select Feature, then choose the relevant Feature from the dropdown menu. You can also select Select feature and choose the relevant Feature directly within your application.
- Under Condition Behaviors, define the behavior for each condition by choosing what action should occur if the selected element or Feature is and isn’t found on the page. Available actions include:
- Next Step
- Dismiss Guide
- URL Link
- Launch Guide
- Snooze Guide
- Go to Step
- Previous
- Repeat these steps for each branch you want to create for this guide.
- Test the branched experience using Preview, then publish your guide when you’re ready.
After you’ve configured and tested your guide branches, visitors will automatically see different steps based on what’s available to them in your app. You can return to the step map any time to preview or update the logic visually.