One of the most unique things in Bento is the ability to create branching experiences in a guide so that users can opt into a journey best suited to their environment or use-case.
You can create two kinds of branching experiences.
This article will talk about Choose Your Own Adventure branching guides.
This article talks about branching step groups.
Overview
Branching guides are great ways to allow users to opt into a path, whether by persona or use-case. You can create branching guides if the paths that a user might take are very different.
If paths deviate only a little (i.e. based on integration choice), you might want to create a branching step group.
đ Branching guides (âChoose Your Own Adventureâ)
Based on a userâs selection, a new guide is launched for them.
How to:
From the Create New modal, pick Onboarding and then CYOA. This will generate a CYOA template.
Note: do not add additional steps to this! A CYOA guide is a single branching step guide.
Create options. You can create placeholder guides from here, or link to guides you've already built out.
Choose whether to show the step as a dropdown or as cards (Hint: if youâre using any of the in-line components, we think cards look much nicer).
Finally, decide whether you want users to be able to choose additional paths after they've completed the first.
Note: while it is possible to create a "normal" branching step that branches to guides, those are not considered CYOA and will not have the ability for users to pick additional paths. CYOA guides come with a unique visual design that can carry forward into the "All Guides" view for things like serial experiences.
Branching card labels (like Create a guide in the image below) must be unique or will result in unexpected image and user behaviour.
Branching cards
We support all image formats 9png, jpeg, svg). We recommend svg formats for sharpness. We don't recommend jpeg since the backgrounds aren't transparent.
Size recommendations vary depending on where you want the image to be in the card. Ultimately, size is up to you so feel free to experiment.
For anything other than background images we recommend: 32-48px. Note: We have a size cap at 60px. If you upload a large image it will be resized however the sharpness will be captured.
For background images the image will fill up the entire card size. Card size: 290x106. Images will resize to try and fit as much of the image in the card, for sharpness use a larger image. Keep in mind if you use background images you will need to factor in your text color.
Important launching call-out
Create your CYOA guides and attach your branches to that guide. Launch your CYOA guide but DO NOT LAUNCH the branched guides.
Additional Watch outs:
Users can only choose 1 guide at this time.
We do not recommend putting any steps or step groups after the branching question. Because Bento only shows 1 guide at a time, itâll create a jarring user experience to make a selection but not be immediately taken to the results of that step and instead be asked to take other actions.
Step names will not be shown to the end user for this guide type since you are already showing the guide name, the guide content and the branching question.