• Home
  • Knowledge Base
    • Overview of Navi+
    • Step-by-step guide
    • Frequently Asked Questions (FAQ)
  • Case studies
  • Live demo
  • Install Navi+
  • Home
  • Knowledge Base
    • Overview of Navi+
    • Step-by-step guide
    • Frequently Asked Questions (FAQ)
  • Case studies
  • Live demo
  • Install Navi+
Home/Knowledge Base/Frequently Asked Questions/Add walk-through with Navi+ menus

Add walk-through with Navi+ menus

45 views 0

Written by khoipn
October 29, 2024

You’ll need to use a library like TourGuideJS, a JavaScript library that can be embedded into your website to add step-by-step walkthrough guides through an attribute format like <div data-tg-tour="<span>My first tour</span>"> ... </div>. It’s completely free. Follow the instructions below to add walkthroughs through the Navi+ menus, either for the entire menu or for individual menu items.

The code is:


    <!-- Navi+ insert Tour Guide library --->
    <script src="https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css">

    <script>
      setTimeout(function() {
          const tg = new tourguide.TourGuideClient();
          tg.start();        
      }, 2000);
    </script>
    <!-- Navi+ insert Tour Guide library --->

 

Was this helpful?

Yes  No
Related Articles
  • Enhancing Navi+ with Custom CSS
  • Detailed support for Navi+ multilingual functionality
  • Guide to Adding a Loading Effect for Menus Replaced by a Navi+ Menu
  • Add Navi+ menus to your website directly
  • Tips for fixing integration themes with Navi+
  • How to use multilanguage on Navi+?

Didn't find your answer? Contact Us

Leave A Comment Cancel reply

  Add Navi+ menus to your website directly

Tips for fixing integration themes with Navi+  

  • Copyright 2025 Navi+ | AIO Navigation. All Rights Reserved