Creating a 'walkthrough' for mobile app

Hi - I wish to create a Walkthrough set of screens (4 screens) that showcases how the App works, prior to the using “getting started”… what’s the best approach, is the Tinder-Pile plugin?

1 Like

Hi Rogello,

There are many kinds of walkthroughs out there - from one static image to arrows overlaid on top of a picture of the UI, to intelligent step-by-step tutorials like the ones we have on the dashboard in Bubble. Can you describe what the user experience should look like in more detail?
The tinder pile doesn’t sound like the right solution for these scenarios, but I see how it’s tempting to creatively use it for that :smile:

Hi georgeciobanu,

thank you for your reply…

what I wish to achieve is the ability to step through 4 screens which would show up right at the start when users access the app. It would be expected that by simply swiping left it moves move forward to the next screen and right to move backwards.

hope this makes sense.

I suggest using groups with you show/hide as the user click the “next” button on the screen.

Also check out the recently released animation action.

thanks @georgeciobanu

  • that makes sense.

I have created the four groups and through a workflow I have the second group showing and first group hiding when the button is pressed/clicked, but how do I create the workflow so that when the same element button is clicked again the second group is hidden and the third is shown?

Two ways: either have the button part of the group - there is a different button in each group, with its own workflow
Or
Create a custom state screen_to_show that you increment when the user clicks the button.

This might also help: Usage of cookies

1 Like

Hi @georgeciobanu

This has been some excellent help…

I have created the four groups which are shown/hidden through the use of a custom state numerical value 1…4

I have also created a SignIn group which is shown through a simple show/hide workflow (not through setting a custom state value)…this group has a Facebook login function.

Here is the issue…

In preview mode it appears that the Facebook integration is working fine and is fetching the required information, although as the screen refreshes I am expected to be shown the group that contains the Facebook details but rather it shows the very first group. I assume that it is resetting the custom state value to 1 and therefore starting the flow from the start.

what are your suggestions? possibly changing the customer state type from Number to possibly Text? I’m not confident that this is will fix it.

thank you

Regards

Have you checked the custom state value with the debugger? If preview the page in debug mode and go step by step, you can inspect properties and values.
You’re probably right that the custom state is reset. I’d check if the user is logged in and if yes, show them directly the group that contains their FB details.