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:

<link href="#appResource.enjoyhint.css#" rel="stylesheet">
<script src="#appResource.enjoyhint.min.js#"></script>
<script type="text/javascript">
$(function () {
    if (typeof EnjoyHint === "undefined") {
        console.warn("EnjoyHint not loaded - check the app resources");
        return;
    }
    // Close a tour left over from an earlier visit (AJAX themes keep the page alive)
    if (window.ehTour) { window.ehTour.destroy(); }

    window.ehTour = new EnjoyHint({});
    window.ehTour.set([
        { selector: "#name", event_type: "next",
          description: "This is a hardcoded hint, see CustomHTML", showSkip: false },
        { selector: ".form-cell:has([name='date'])", event_type: "next",
          description: "#form.enjoyhint_setup.date.[setup]#", showSkip: false },
        { selector: ".form-cell:has([name='desc'])", event_type: "next",
          description: "#form.enjoyhint_setup.desc.[setup]#", showSkip: false },
        { selector: "#submit", event_type: "next",
          description: "#form.enjoyhint_setup.save.[setup]#",
          shape: "circle", radius: 50, showSkip: false }
    ]);
    window.ehTour.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.