Uage Guide or tips in the app on launch

I have seen in many applications where they show a page with some usage tips or information. How can I achive this in Ionic?

I understand we can use Ionic BackDrop. But not sure how to add image to it and how it only once on first time launch.

I have attached the sample screenshot from another app for your reference to understand what I mean.

If any one has any idea, please let me know.

I’ve done some similar stuff with my app.

Just keep in the forefront of your mind that there are a bunch of potential screen sizes so you’ll have to figure out how to scale everything correctly.

Now moving on:

I ended up using the $ionicModal service for this, and created some custom modal templates. Just by using CSS I could make the background an opaque black, add text, buttons, etc. If you create a container in the modal that has the css “position: relative;” and then the objects inside are “position: absolute;” you can really control where things go.

Here are a couple of pictures of this in my app (One is for the tutorial, and the second is for my sharing options)

Don’t be afraid to get creative, if you just think a little outside the box you can achieve some crazy results with Ionic.


This looks great to see. Nice work done.

I am looking for a simple overlay effect instead of using modals. The simple one will be more effective for first time users.

I can promise using a modified modal will be easier than creating different over lays! Just have to modify the CSS a little bit like I did and you can achieve the perfect effect. Then just listen for taps on the main div or dom element of the modal and you can hide it that way.

Thanks for your time again. It makes sense. Thanks for your time.

Would it be possible to share some demo of your modal based idea?

I don’t have the time to put one together, It’s just simple CSS.

Thanks again on your idea.