Add Guided Tours using EnjoyHint

Enhance user navigation in your Joget apps by integrating guided tours using EnjoyHint. Follow these steps to set up and customize your guided tours effectively.

1. Download the following files from GitHub - xbsoftware/enjoyhint
   • enjoyhint.css
   • enjoyhint.min.js
2. Upload both files into your app by accessing Properties & Export > Add Resource. This allows you to incorporate the EnjoyHint library into your app's environment.
3. Insert the following code into the CustomHTML section of your app to integrate EnjoyHint:
   

   <script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
   <link href="#appResource.enjoyhint.css#" rel="stylesheet">
   <script src="#appResource.enjoyhint.min.js#"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
   
   <script type="text/javascript">
       // Initialize the EnjoyHint instance
       var enjoyhint_instance = new EnjoyHint({});
   
       // Configure the guided steps
       var enjoyhint_script_steps = [
           {
               selector: "input[id='name']", // Target the name input field
               event_type: "next",
               description: "Enter your name here.",
               showSkip: false
           }, {
               selector: "#section1 > div.form-column > div:nth-child(2)", // Target the date field
               event_type: "next",
               description: "Click here to fill up the date!",
               showSkip: false
           },
           {
               selector: "#submit", // Target the submit button
               event_type: "next",
               description: "Click the save button once you're done!",
               shape: 'circle',
               radius: 50,
               showSkip: false
           }
       ];
   
       // Set the script configuration
       enjoyhint_instance.set(enjoyhint_script_steps);
        
       // Run the EnjoyHint script
       enjoyhint_instance.run();   
   </script>
   

When you open the form during runtime, EnjoyHint will provide interactive hints to guide users through the form fields efficiently. This feature enhances user experience and helps navigate complex forms easily.