Welcome Flow Example (branching/choose your own adventure)
If you have several actions that a person can complete in your application and you would like to give them some autonomy to decide which they'd like to see first, a self-selecting flow can be a great way to give them that ability.
This style of flow is often used for onboarding experiences when the type of experience should differ based on the persons goal or persona, or for help information, but feel free to get creative!
Others tend to find the most success with these flows when they're:
- At the first page people arrive to after logging in (often the dashboard or homepage).
- In the widget. You can learn more about our in-app widget here.
These experiences are typically composed of:
- A one or two step modal or slideout flow with 2-4 call-to-action options
- Separate flows linked to each call-to-action option
- Having a flow for each call-to-action isn't necessary, but can provide further context and guidance to those who are new to your product. If you find that the page they will be redirected to when they click your call-to-action is self-explanatory, feel free to omit the corresponding flow
Here's an example of what a finished self-selecting onboarding flow can look like:
Let's build it
1. Create your flows for each call-to-action
These flows should be separate from one another, even if they exist at the same URL. In the example above, there are individual flows that explain how to 'Connect your mailbox', 'Activate your chat button', 'Invite your team' and 'Connect your Facebook page'. These will likely differ from your application, so be sure to use the actions that make the most sense for your customers.
ProTip: If you only want these flows show when someone clicks to launch them in this experience, use the 'Show Manually' option.
2. Create the modal/slideout flow (like the above)
Feel free to use one of the optional Templates in the editor (for example the 3 button Modal/Slideout template is a popular choice) or start from scratch and add use the 'Button component' to add in your own buttons. Then add some text and/or an image to complete the look.
Personalize your flow to really give a warm welcome and make the experience feel more unique.
3. Add your calls-to-action.
In the above example, Casengo created four custom images for their users to click on.
You can create these images in an application like Photoshop, with your product designer, through a free button builder website (such as this one), or if you're really handy you can make the 'buttons' inside of Google Slides.
Then link your images to each related tooltip flow by setting the image or button to trigger the flow. Click here to read more about our button component options.
Note: The customer will NOT be redirected to the appropriate page if the flow is not set to show on the same URL where they are triggering the flow. If this is an issue, use a permalink in the URL section instead of using the 'Trigger flow' option (will cause page refresh)
Should you choose to 'Trigger your flow' you can find the flow ID by clicking on the pencil icon in the editor. Learn all the places to find the Flow ID
4. Preview... then you're ready to Publish!
Create a flow that you're excited about? We'd love to see it! Shoot your flow over to us at email@example.com. We can assist at that email address with any questions you may have as well so please don't hesitate to reach out