Frequently Asked Questions

https://github.com/smonier/jsfaq

To deploy to a Jahia instance, ensure `.env` has valid credentials and host, then run:

yarn build && yarn deploy

Or install directly from the Jahia Public Store, and activate the module on the desired site.

 

⚡ Quick Start

Step 1: Create FAQ Page

1. In Jahia Edit Mode, create a new page or navigate to an existing one
2. Add the FAQ Page component (jsfaqnt:faqPage)
3. Set the Title and optional Introduction text

Step 2: Add Content

1. Option A: Add FAQ Sections for organized content

   • Set Section Title and Description
   • Add FAQ Items inside sections

2. Option B: Add FAQ Items directly to the page

   • For standalone, uncategorized questions

Step 3: Configure

• Featured - Mark important questions
• Tags - Use Jahia's native tag picker for categorization
• Enable Tag Filter - Toggle tag filtering on/off (FAQ Page property)

Step 4: Publish

Your FAQ is now live with:

• ✅ Search functionality
• ✅ Collapsible questions
• ✅ Schema.org structured data
• ✅ Tag filtering (if enabled)

🔍 Search & Filtering

• Real-time Search - Full-text search across questions and answers
• Keyword Highlighting - Search terms automatically highlighted in results
• Auto-expand on Match - Matching items automatically open with highlighted keywords
• Tag Filtering - Filter questions by Jahia's native tags with visual feedback (optional)

🎨 User Experience

• Collapsible Items - Click to expand/collapse FAQ items with smooth animations
• Featured Questions - Highlight important questions
• Empty State - Friendly message when no results found
• Keyboard Navigation - Full keyboard support for accessibility

🚀 Performance & SEO

• Schema.org FAQPage - Automatic structured data for rich search results
• Server-Side Rendering - Fast initial page load, SEO-friendly
• CSS Modules - Scoped styling with no conflicts (~8KB)
• Lightweight Client Bundle - ~8KB (gzipped: ~2.5KB)

🛠️ Developer Experience

• TypeScript - Full type safety throughout the codebase
• Hot Reload - Development mode with instant updates
• Modern Tooling - Vite build system, ESLint, Prettier
• CSS Modules - Scoped styling with no naming conflicts