Hello guys. I want to show you how to add sth like this:
1. Go to globalTemplate
2. In <head></head> section add this line:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css" integrity="sha256-OYXGS5m4oWZAAqoAKpf7Y3bIdzdd9jBfly/xCavEpGw=" crossorigin="anonymous" />
3. Now in globalTemplate find
<!--ipsQueryLog-->
and add above:
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js" integrity="sha256-fOPHmaamqkHPv4QYGxkiSKm7O/3GAJ4554pQXYleoLo=" crossorigin="anonymous"></script>
<script type="text/javascript">
function startIntro(){
var intro = introJs();
intro.setOptions({
steps: [
{
intro: "Step 1 text"
},
{
element: document.querySelector('#elNavSecondary_71'),
intro: "Step 2 text."
},
{
element: document.querySelectorAll('#elNavSecondary_63')[0],
intro: "Step 3 text",
position: 'right'
},
{
element: '#elNavSecondary_56',
intro: 'Step 4 text',
position: 'left'
},
{
element: '#step4',
intro: "Step 5 text",
position: 'bottom'
},
{
element: '#step5',
intro: 'Step 6 text'
}
]
});
intro.start();
}
</script>
To select your own elements on your forum just change id of elements in element: '#elementid'
To trigger the function you can use a button:
<a class="ipsButton ipsButton_normal ipsButton_medium" href="javascript:void(0);" onclick="startIntro();" rel="">Start a tour</a>
You can find full documentation of IntroJS HERE