I need to implement intro.js in a playcanvas project and use it, but how do I do that?
In case you don’t know what intro.js is here is their website:
http://introjs.com/
I put the intro.js and the .css file into my project
1 Like
The source is out there and docs are freely available, so should be no problem to integrate it.
You can upload relevant assets and with CSS you will need to add it to - check out existing tutorials with UI, they show how to do it.
I already implemented it in my project, but in the intro.js documentation it says I should start it with a function from the script in the body tag in the HTML and I can’t call that function. I tried using the HTML script tag and with my UI handler, it didn’t work both ways. Do you have any tips for me?
I don’t know the specifics of intro.js but I would assume that doing something like this should work:
- Create a new script and copy paste intro.js into it
- Make sure this new script is loading first by putting on the top of the script loading order in the settings
- Create another script that calls the initialization function that you need from intro.js. It doesn’t have to be structured like a PlayCanvas script, just delete evertything and call the function you need. Make sure that this script is second in the script loading order.
That is a general guideline - basically all your scripts are being loaded based on the script loading order. It’s up to you to decide what to write in them. You don’t need to add code in the HTML document as your scripts will run anyway.
It still doesn’t work, maybe I did something wrong in the code. When I implement a script in another Script does it work like implementing css and html?
here is my project:
https://playcanvas.com/editor/scene/541785
In a nutshell, the CSS ins’t being added correctly for introjs. I’ve also called introJs().start() after the HTML and CSS has been added in ui.js to ensure that it is being called at the right time.
The link that @Ryynosaur gives the example of how CSS should be added via Javascript.
Here is a fork of the project that shows the introJs popup:
https://playcanvas.com/project/497252/overview/introtest2-from-forums
Hi I’m overseeing anna on this project. Are there any intro.js alternatives that we could look at that anyone could suggest, basically ant ideas for a quick tou of our UI before the user starts the PCv tour
Thanks in advance @yaustar @vaios etc
Conor
Is there a reason for not using Intro.js as it seems to do what you need?
Hi @yaustar we didn’t decide to not use it, I was just wondering what the alternatives were or what people were using for intro tours for the UI, we’re not dealing with a gaming commmunity, so we basically gotta explain it really realy well, like you would to a person with no experience in this area
@yaustarwe’ve got it working btw 
Hmm, depending on the application, I would actually consider making the UI super simplified so you basically can’t go wrong. A tutorial won’t help if the UI is unintuitive in the first place.
I’ve been in games/apps where we use something similar (lightboxing, highlighting and walkthrough) and so far I haven’t seen a perfect solution. Users hate reading and they will just click through until they get somewhere and find out they can’t progress because they haven’t read the tutorial properly.
I would also look at adding reinforcement tooltips so they don’t have to memorise everything along with a option to replay the tutorial.
hi
yes thanks, we have been looking at toolips, thanks for this suggestions. the nature of our app is that some features they may not imagine they exist so we need to show them functions, and as I said it is to a non-tech savvy user, but yes you’re right, we would need to keep it very simple and have a skip[ option
thanks
Another option then is to show a video walkthrough of each step? Perhaps with a PIP mode that can be paused, etc? It’s really hard to give general advice as it usually it needs to be specific to the app.