Add interactive introductions to your Ionic/Angular app with Intro JS

I am sure there are plenty plugins available in Angular and Ionic for designing intro or walkthrough pages, but a good intro tutorial is a must for mobile and web apps where user experience or Usability matters.

As discussed in this website usability.gov UX relies on several principles, I am just gonna mention the source and you can all have a good read and try to build your next project with that in mind. It was just a glance on UX, i thought it would be nice to mention it for the sake of this use case.

https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experience

Back to the real deal, the other day i ve been trying to implement an intro that could precisely describe what every button/menu does in the app .. so I ve stumbled into Intro JS : another vanilla JS library/CSS library to add step-by-step introduction or hints, and i will be simply showing you how to integrate it with ionic/angular [Ang4 Ionic3] without complications or advanced implementations since i do not know any so far 😅

Let’s start by installing the library through NPM

npm install --save intro.js
npm install --save @types/intro.js

No need to add it to your app.module, just open your index.html and add the following CDN lines ( CDN stands for content delivery network : meaning some people have made those files available withing distant servers across the WWW, all u have to do is load them 😏:

<!--intro.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>

That’s pretty much all we need to do as a config .. 😀!

Now open the component/page in which you want to integrate the nice intro tutorial of intro js and add this to your typescript file

// Intro method to be called 
introMethod() {
// import IntroJS
const IntroJs = require("../../../node_modules/intro.js/intro")
let intro = IntroJs();
console.log("inside intro.js");
intro.setOptions({
steps: [
{
intro: "Ahlan wa Sahlan"
},
{
element: "#step1",
intro:
"When you are slaves on Earth, and  you are told: ‘Renounce Earthly freedom, for in Heaven awaits you unimaginable freedom.’ Answer back: 'He who did not taste freedom on Earth, will not know it in Heaven!’",
position: "right"
},
{
element: "#step2",
intro:
"Most people live way too long in the past. The past is a springboard to jump forward from, not a sofa to relax on",
position: "bottom"
}
],
showProgress: true,
skipLabel: "Annuler",
doneLabel: "Commencer",
nextLabel: "Suivant",
prevLabel: "Précédent",
overlayOpacity: "0.8"
});
intro.start();
}

You can change the default labels for the next, prev, back and done buttons as detailed in the above code sample.
The rest is as easy as pie, whatever HTML tag you wanna control by labeling it respectively with the aformentioned steps. something like this :

<div id="step1">
// content you would like to highlight
</div>

Do the same for the step Ids u have and that’s it .. 😄

Let me know if you have successfully incorporated this in your project. Happy coding ⚡️.