To create an intro screen that shows only the first time the app opens, create a new page in your app customizer under Custom Pages => Add New.
Choose the Page Builder.
Use the title Intro - This is very important, it cannot use a different title.
You can add anything you want, but we recommend choosing the Custom HTML block, then add your desired content. You can add anything you want, if you would like to use custom horizontal slides you can add this code:
<ion-slides pager="true"> <ion-slide> <div class="slide"> <img src="files/intro.png" alt="Intro" class="intro-image"> <h3>Welcome to our app!</h3> </div> </ion-slide> <ion-slide> <div class="slide"> <h3>Welcome to our app!</h3> </div> </ion-slide> </ion-slides>
The example above can be modified as needed. This intro will only show the first time an app user opens the app, it saves an item in browser storage to keep track of this.
Save the page and add it to your menu.
Rebuild your app preview.
You can hide this item in the menu if you don't want it to show, by adding a class of "hide." You must also leave the navigation label as "Intro" for it to function properly.