Show a message only once (onboarding example)

Tutorials and DIY Guides Staff Made Tutorials
1

When your user first downloads your app it’s quite common to show them some sort of welcome message, or some instructions about how to use your app.

This is a great idea for someone who has just installed your app, but for someone that opens your app regularly this can become repetitive and annoying.

In this tutorial, we’ll look how you can use stored variables to show an onboarding message the first time a user opens your app, but hide if from them every time they subsequently open your app.

What we’re building

In this example, the onboarding screen is shown when the app is installed and opened for the very first time. Every other time (including after the app is updated!) the app skips straight to Screen2

onboarding

Screen1

On Screen1 we create a variable called onboardingCompleted. As the name implies, we’re going to use this variable to keep track of whether or not the user has completed the app onboarding. This default value for a stored variable isnull which is important to know for the next step.

01_onboarding

Every time the screen opens, we test whether the onboardingCompleted value is null. This will be true the first time the app opens, and to prevent it from being true again, we just need to give it any value we want. You can choose something like 1 or true or "yes" - literally anything!

After this we go to the onboarding screen. You needs might be slightly different here. Perhaps instead of opening a dedicated screen you might show an alert or make a label visible for a few seconds and hide it again. This part is also totally up to you.

Finally, every time the user opens the app, except for the first time, the app will automatically navigate to Screen2

02_ifCompleted

Screen2

In the animation above, my Scree2 just has a label and a HomeButton. Here are the blocks for this button:

03_home

While testing, it became pretty tedious to have to constantly uninstall and then reinstall the app over and over again just to see my changes to the onboarding screen, so I also created a resetButton that works like this:
04_reset

Onboarding Screen

As I’ve already mentioned, you can use anything your like for the onboarding like a label, a sound, an alert or a video, but here are the blocks I used in the animation above:

05_onboarding

Remix

If you want to remix this app for yourself, just click on the following link:

https://x.thunkable.com/copy/2ffe3fd43388b078e4b0ed1d9acc2caa

6 Likes
2

Nice!

I just prefer tinyDB / LocalStorage instead of stored variables :smile:

Thanks! :blush:

3

I don’t understand why but I tried something similar (when a stored variable is empty the user should be navigated to Screen1 for an intro) but it does not do anything. Not even when I add “navigatetoscreen1” without any if question… :confused:

25
25884×318 29.7 KB

update Is it not possible to navigate to a screen contained in a stackable navigator? or is this a bug? because it seems to work for screens that are within the same (bottom) navigator and also for navigating to the stackable navigator itself but none of the screens that I placed within the stackable navigator :thinking:

best, Chris

4

I have been considering switching to this method to try to keep things faster. Do you notice a slowdown when storing info using localDB vs a stored var?

5

Hi, @jared! :wave:

I always notice a slowdown every time I use any of the 3 types of Variables. (App. Cloud, Stored).
Also, I haven’t used localDB yet, so I can’t say about it…

That’s the reason I use LocalStorage over all local storage methods.

Thanks! :blush:

6

THanks for the input @kartik14!! Doesn’t that require extra blocks? do the extra blocks also not cause a slow down?

1 Like
7

Hi, @jared! :wave:

Yes, It causes extra blocks, but it’s more efficient method rather than using Stored Variables (which cause a great slowdown).

Thanks! :blush:

1 Like
8

2 posts were split to a new topic: I’d like to make an online Game

9

Why the remixing of the app is not working?

10

I wanted to show a login screen on my game app but if only the user has downloaded my game for the first time so if there is anything about it pls do anyone let know!:relaxed::relaxed:

11

Can images work with this too???

12

Absolutely @versatile - the might even be a better approach here because the image component allows you to use URL to online images so makes the whole thing faster/easier to update.

2 Likes
13

It’s done,but I can’t loop it,I want it to be repeated as long as the screen stays ON

14

You just need to add a loop and have it cycle through the onboarding carousel continuously

2 Likes