TagHelper.js Help & Usage Guide

TagHelper.js injects dynamic help/info icons into your Web Pages, providing contextual help, AI-powered FAQs, production notes,Videos and more. Designed for Web App projects.

---

What does TagHelper.js do?

• Automatically injects info icons () into elements you specify.
• Shows a popover with help text, video, FAQs, production notes, and an AI chat tab when the icon is clicked.
• Loads help content lazily from your server, specific to your organization.
• Lets users generate and submit help, FAQs, and notes, or ask questions to AI.

How to Use

1. Configure the Library

   Add this to your main layout (e.g.,Layout.html _SHLayout.cshtml):

   <script>
   window.TagHelperConfig = {
       className: 'helpicon', // The class to target for help icons
       orgidkey: 'YOUR_COMPLEX_ORG_KEY' // Your secure organization key (ask your admin)
   };
   </script>
   

   Note: orgidkey is a secure, encoded value that maps to your organization in the backend. Never expose the plain orgid.
2. Add the Target Class to Your Elements

   Use the configured class (e.g., helpicon) on any element you want a help icon for:

   <div class="form-group helpicon" id="usernameField">
       <label for="username">Username</label>
       <input type="text" id="username" />
   </div>
   

3. Include the Script

   Ensure taghelper.js is included in your layout or page:

   <script src="~/js/taghelper.js"></script>
   

What Users See

• Info icons appear next to your configured elements.
• Clicking an icon opens a popover with:
  • Help: Instructions and video (if available)
  • FAQs: Frequently asked questions
  • Prod Notes: Production notes
  • Ask AI: Chat with AI for contextual help
• If no help exists, users can submit new help content.
• AI features allow users to generate or ask for more information.

Advanced: Organization Key

• orgidkey is a secure, encoded value (e.g., Base64 or hash) that maps to your organization in the backend.
• When the help icon is used, this key is sent to the server to fetch the correct help content.
• Never share your plain orgid; always use the provided key.

Troubleshooting

• Help content not loading: Ensure your orgidkey is valid and your backend API is accessible.
• AI features not working: Check with your admin that AI services are enabled and configured.

Example

<!-- In your layout -->
<script>
window.TagHelperConfig = {
    className: 'helpicon',
    orgidkey: 'MTAwMA==' // Example: Base64 encoded orgid
};
</script>
<script src="~/js/taghelper.js"></script>

<!-- In your page -->
<div class="form-group helpicon" id="emailField">
    <label for="email">Email</label>
    <input type="email" id="email" />
</div>

---

For advanced integration or support, contact your system administrator or the Lighthouse support team.