App Tour Guide / Walkthrough

Anyone seen something like TourMyApp or Shepherd done with Ionic?

Also : https://github.com/DaftMonk/angular-tour

1 Like

I like the angular version of this concept. Pretty interesting approach to a walkthrough.

Unfortunately it does use jquery …

I don’t think a lot of thought has been put into doign app walkthroughs other than this one

Which I see can be limiting.

Could be an interesting project for someone to attempt to set up. Maybe take a look at the popover branch of ionic

2 Likes

Thanks Mike. I’ve been dabbling with just using the $ionicLoading service. It’s certainly not as feature rich or pretty as the “tour” libraries, but it works for what I need right now.

With the $ionicLoading template option, you can do some pretty useful stuff :

Of course, it can get ugly if you put too much stuff in there.

With a little bit of custom styling, this can be made to look pretty decent.

The benefit to this over $ionicPopup is the whole scope issue. I don’t need these things to show much besides some instructional text. I don’t want to need to worry about callbacks , results, $scope for the pop-up etc.

did you find a library that does work for ionic?
or did you do it with the loader?

i’ve tested intro.js, hopscotch andshepherd but none did work well.

For now, I’m just using the loader. I know there is a WIP branch with some new features, but I can’t use that branch.

every time i start the app the tutorial start again how do i fix that?

Set a flag in LocalStorage and if the user Skips the tutorial (or only show it once) and then check this each time. Have a way for the user to go back to it in the Help

I built an angular module called nz-tour http://github.com/nozzle/nzTour. It still needs a bit of testing, but it might get the job done.

4 Likes

Old post but still:
@tannerlinsley, nice work, hadn’t had a chance to try it out, but when the need for that type of walkthrough shall arrive, I’ll know where to go…

Here’s a responsive, Angular & Ionic tested and working directive for walkthrough/onboarding/invitation using the transparency design:

5 Likes

I tried your plugin (nzTour). It works very well in the browser, but doesnt work for me on the device! My app just freezes! Do you know any fix for this ?

Hi, @Ophir : is there some documentations/guide lines for your module ?
The demo page on Plunker does not work (loading forever).

Thanks.

M.

I have yet to test it with the latest version of ionic. I’ll try and give it some TLC as soon as I can. Glad to see its working well in your browser.

Hey ziobudda,
I don’t have other guidelines aside to the documentation written on Github read (has details about the all the different properties and how to use).
Reran the plunker demo and it seemed working for me (safari and chrome) so perhaps you could try again, hopefully the problem there worked out (had a day or two where running anything on plunker did not work)
Tell us how things worked out and if there are any issues left I’d be happy if you mention them, and you can also contact me on Github.

Hi @Ophir i’m usign you directive… nice work!
But i want the next behavior, when a walkthrough is closed or hidden then i want another walkthrough will be show it.

I’m trying with the property onWalkthroughHide but do nothing.

Here is my code:

<walkthrough
        id="questions"
        walkthrough-type="transparency"
        focus-element-id="question"
        icon="single_tap"
        main-caption="{{caption1}}"
        is-active="trial2"
        onWalkthroughHide="walkIsClosed()">
</walkthrough>

and in my controller it’s the function.

$scope.walkIsClosed = function(){
	alert("hidenWalk");
}

I don’t know if i’m wrong, please help me!

And Thanks!

Hey Anthony, Cool to hear you’re working with the walkthrough and like it.
About your example, I see a small thing that might be part of the cause for the issue:
try changing ‘onWalkthroughHide’ to ‘on-walkthrough-hide’ for Angular.

Let me know how it works out!
P.S I’m more responsive at Git, you can contact me there in the future.
Thanks

Hi Ophir,
I am using ng walkthrough for our enterprise apps…its really good…I have a doubt how to ensure it will be shown to user
only once he is logging for the first time and not every time the app is killed.

Secondly how can we add some animations and new images to the walkthrough.

Thanks

Hi Chaitali, glad to hear you’re using and enjoying the walkthrough.
Th simplest and most direct way I use to avoid walkthrough firing next time app is launched is to have a flag in local memory marking if on boarding has been displayed or not and set the flag to true every time a walkthrough is closed. If you’re using the walkthrough with a button this will verify user has actually read the walkthrough and not just clicked through it by mistake.
Regarding animations, the directive has a slight fade-in fade-out animation when displayed. if this is the event you want to animate but differently then just take a look at the css and change it for “.walkthrough-background.walkthrough-active”, if you require animation form something else, such as an animated instruction, then that is not supported, although you might try displaying an animated gif if the situation allows. For images, read the manual on Github on how to change icon, and you can see demo as well. if you require more than one image, then i suggest you use the transclude version of the walkthrough.

Good luck!

Thanks a lot Ophir…I’ll try what you mentioned and let you know…

1 Like

Thanks! nice work. implemented and working super fine!!!

I’m looking for a similar lib for ionic2.
Anyone using one?