On app load (first time only)

Trigger something the first time a user uses an app (eg: show an introduction screen only to first time users)

It’s possible to do something the first time a user opens an app but then not again (provided they don’t delete and re-download your app or delete cookies on browsers).

A common example is to show the user an intro screen the first time they use the app but not the second time. This is one of the options that can be set with the onboarding screen (which you can select when adding a new screen to your app). However, below is an example of how to do this with code.

The approach we take is to run your code once and then set a flag so that the app remembers the code has been run. The second time the code is run it checks for the flag to see if it should continue or not.

To do this, we’ll create a variable to act as the flag and store it in the app (if you have a native app, it will be stored on your device, if you are using a browser to view a webapp, it will be stored in a cookie).

The following code example first checks to see if there is a variable called ‘app-visited’. The first time we view the app it doesn’t exist as it hasn’t been created. We check to see if it exists (ie, if it’s ‘undefined’) we can then run some custom code or simply let the user continue to view the screen they’re on. The important step is that we now create and store the variable ‘app-visited’ so that next time the screen is viewed it will be detected.

On the second viewing of the screen, the code checks again for ‘app-visited’. However, this time the variable does exist and the second section of code is run (the section below the ‘else’). In this example we navigate a user to another screen.

// We try get the value of the variable "app-visited"
Fliplet.App.Storage.get('app-visited')
  .then(function (value) {
    if (typeof value === 'undefined') {
      // If it is the first time the user gets
      // to this page we expect this value to be 'undefined'
      // So we set the value at this point
      Fliplet.App.Storage.set('app-visited', true);
      // you can add custom code here if you wanted

    } else {
      // If the user already visited this screen
      // we can run custom code
      // here we navigate the user to another screen
      Fliplet.Navigate.screen(123);
    }
  });

Related topics