🎯 How It Works

The contextual help system uses HTML attributes to show relevant help based on:

• User's persona (injured worker, advocate, legal professional, etc.)
• Progress level (beginner, intermediate, advanced)
• Page context (what they're currently trying to do)

📝 Implementation Guide

Step 1: Add Help Triggers

Add data-help attributes to any element:

<button data-help="download-app">
  Download App
</button>

Step 2: Define Help Content

Create help content in a JSON file or directly in HTML:

<div 
  data-help-id="download-app" 
  data-help-persona="injured-worker,explorer"
  data-help-progress-min="0"
  class="help-content" 
  style="display: none;">
  
  <h4>Downloading the App</h4>
  <p>
    3mpwrApp is available for Android, iOS, and web. 
    Choose the version that works best for you:
  </p>
  <ul>
    <li><strong>Android:</strong> Google Play Store</li>
    <li><strong>iOS:</strong> Apple App Store</li>
    <li><strong>Web:</strong> Works in any browser</li>
  </ul>
</div>

Step 3: Include Help JavaScript

Add the contextual help script to your layout footer:

<script src="/assets/js/contextual-help.js"></script>

<div 
  data-help="claim-filing"
  data-persona="injured-worker"
  data-progress-min="0">
  
  <h4>Filing Your Claim</h4>
  <p>Here's what you need:</p>
  <ul>
    <li>Incident details</li>
    <li>Medical documentation</li>
    <li>Witness information</li>
  </ul>
</div>

<div 
  data-help="client-mgmt"
  data-persona="advocate"
  data-progress-min="20">
  
  <h4>Managing Clients</h4>
  <p>Best practices:</p>
  <ul>
    <li>Maintain confidentiality</li>
    <li>Track deadlines</li>
    <li>Document all interactions</li>
  </ul>
</div>

<div 
  data-help="tribunal-search"
  data-persona="legal"
  data-progress-min="0">
  
  <h4>Searching Decisions</h4>
  <p>Advanced search tips:</p>
  <ul>
    <li>Use quotes for exact phrases</li>
    <li>Filter by date range</li>
    <li>Search by adjudicator</li>
  </ul>
</div>

🔥 Pro Tips

• Keep it short: 2-3 sentences max for each help item
• Show, don't tell: Use screenshots or GIFs when possible
• Progressive: Show basic help first, advanced tips later
• Context-aware: Different help for different personas
• Dismissible: Let users hide help they don't need

🎨 Customization

Customize the appearance by editing /assets/css/contextual-help.css:

.help-tooltip {
  background: #4CAF50;
  color: white;
  padding: 1rem;
  border-radius: 8px;
  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.help-trigger {
  position: relative;
}

.help-trigger::after {
  content: "?";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

📊 Analytics Integration

Track which help items are most accessed:

// In contextual-help.js
window.trackHelpView = function(helpId) {
  if (window.ga) {
    ga('send', 'event', 'Help', 'view', helpId);
  }
  console.log('Help viewed:', helpId);
};