Start a conversation

How to set up a temporary screen that’s only visible on initial launch

You can quickly set this up by using a bit of custom code. This document will guide you through the process. 

This will create a redirect action that allows a specific screen to only visible once, upon the first launch of the app. This can be used to have a specific onboarding screen, or if you want the user to accept some terms and conditions before accessing the app. 

Once you’ve gone through the steps below, you will be able to test it in Preview mode in Fliplet Studio and Fliplet Viewer (but only once, because of the nature of the code. If you want to test again, use an incognito window in your browser). If you are unsure about the code, send an email to support@fliplet.com and the Customer Success team are happy to take a look. 

The set up: 

  1. Build your screens. You need to have: 

    1. The temporary screen that will be shown once and be skipped in the future.

    2. The main screen that will always be the main screen after the initial view.

  2. You need to add some custom code into both screens to create the redirect 
    1. For the temporary screen, copy and paste the code below into Screen JavaScript in the developer options. In the code, locate the 'TODO' comment and fill in the name of the main screen.
        Note: You will need a button on this screen which will redirect the user to the main screen.
      // Hides content before checking if it should be redirected
      document.addEventListener('DOMContentLoaded', function() {
          Fliplet.Navigator.onReady().then(function() {
              var legalPVKey = 'legalPV-' + Fliplet.Env.get('appId');
              var homeID;
              var legal;
              
              // Get pages names
              Fliplet.Pages.get().then(function(appPages) {
                  appPages.forEach(function(page) {
                      // Saves page ID
                      // @TODO: Replace the below variable with the name of the main screen
                      if (page.title === "MainScreenName") {
                          homeID = page.id;
                      }
                  });
      
                  Fliplet.Storage.get(legalPVKey).then(function(store) {
                      legal = store || {};
                      if (legal.legalAccepted && !Fliplet.Env.get('interact')) {
                          // Redirect to Home screen if user already accepted the legal terms
                          setTimeout(function() {
                              Fliplet.Navigate.screen(homeID);
                          }, 450);
                      }
                  });
                  
                  $('.btn').on('click', function() {
                      legal.legalAccepted = true;
                      Fliplet.Storage.set(legalPVKey, legal);
                  });
              });
          });
      });

    2. For the main screen, copy and paste the code below into Screen JavaScript in the developer options. In the code, locate the 'TODO' comment and fill in the name of the temporary screen.

       Fliplet.Navigator.onReady().then(function(){
        // Use the Fliplet.Navigator.onReady() promise to ensure
        // dependencies are loaded before executing custom code
      });
      // Hides content before checking if it should be redirected
      document.body.classList.add('hidden');
      document.body.classList.add('animated');
      
      
      document.addEventListener('DOMContentLoaded', function() {
        Fliplet.Navigator.onReady().then(function () {
          var legalPVKey = 'legalPV-' + Fliplet.Env.get('appId');
          var legalID;
          var pv;
      
      
          // Shows content if you are editing the screen
          if (Fliplet.Env.get('interact')) {
      document.body.classList.remove('hidden');
      document.body.classList.add('fadeIn');
            return;
          }
      
      
          // Get pages names
          Fliplet.Pages.get().then(function (appPages) {
            appPages.forEach(function(page) {
              // Saves page ID
              // @TODO: Replace the below variable with the name of the temporary screen
              if (page.title === "TemporaryScrenName") {
                legalID = page.id;
              }
            });
      
      
            Fliplet.Storage.get(legalPVKey).then(function(store) {
              pv = store || {};
      
      
              if (!pv.legalAccepted) {
                // Redirect to Terms & Conditions screen
                setTimeout(function() {
                  Fliplet.Navigate.screen(legalID, {transition: 'none'});
                },450);
                return;
              }
      
      
              // Shows content if no redirect is needed
              document.body.classList.remove('hidden');
      document.body.classList.add('fadeIn');
      
      
            }, function() {
              // Shows content if something goes wrong
              document.body.classList.remove('hidden');
      document.body.classList.add('fadeIn');
            });
          });
        });
      });
    3. If you want to remove the heading with the hamburger menu on the temporary screen (so that users can’t navigate to another screen), copy & paste the code below into Screen CSS/SCSS in the developer options in the temporary screen: 

.fl-viewport-header  {
  display: none;
}
Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Johanna Gustafsson

  2. Posted
  3. Updated

Comments