How to use intro.js in phpfox 4.7.7

Question

I'm building a website with phpfox and want to use intro.js to provide a guided tour of the website.
How can I do that, please?

This is for Phpfox 4.7.7 . I already tried extracting the downloaded intro.js folder to my project and adding the dependencies to the HTML code as shown on the website via AdminCp/themes/material/Edit/html

The bottom of the HTML code looked like this after linking the JavaScript:

      </footer>
    {{ js }}
    <div class="nav-mask-modal"></div>
    <script type="text/javascript" src="intro.js"></script>
  </body>
</html>

I also created a button via AdminCp/Blocks/add block and input the below code in the php/html edit box:

<a class="btn btn-large btn-primary" href="javascript:introJs().setOption('showProgress',true).start;">Get a demo tour</a>

and finally, I added the below to an element in the HTML:

<div id="section-header" data-step="1" data-intro="Welcome">
  <div class="sticky-bar">
    <div class="container sticky-bar-inner h-6 {% if setting('user.hide_main_menu') == true %}setting-hide-menu{% endif %}">
      <div class="mr-2 site-logo-block">
        {{ logo }}
      </div>
      ...
    </div>  <!-- Added by edit! -->
  </div>    <!-- Added by edit! -->
</div>      <!-- Added by edit! -->

I expected a guided tour to start after clicking the button, but instead was redirected to a page with the message

Page not found