Accordion Blocks vs Awesome FAQ – answer questions before customers ask

Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages. The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme. Features Adds a Gutenberg block for adding accordions to your site. Supports multiple accordions with individual settings for each accordion item. Fully responsive. Support for item IDs and direct links. Supports nesting accordions. Accessible (for users requiring tabbed keyboard navigation control). Optional Features Open individual accordion items by default. Disable auto closing of accordion items. Manually close items by clicking the title again. Scroll page to title when it’s clicked open (including setting a scroll offset position). Set the HTML heading tag for the title element (h1–h6, button). Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults. Supports adding custom block styles using wp.blocks.registerBlockStyle. Output The plugin will ultimately output following HTML (simplified for this example): Title with H2 tag Content Custom CSS You can use the following CSS classes to customize the look of the accordion. .c-accordion__item {} /* The accordion item container */ .c-accordion__item.is-open {} /* is-open is added to open accordion items */ .c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */ .c-accordion__title {} /* An accordion item title */ .c-accordion__title--button {} /* An accordion item title that is using a ` ` tag */ .c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */ .c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */ .c-accordion__content {} /* An accordion item content container */

Answer your visitors’ questions before they hit the contact form – beautiful, SEO-ready FAQ sections in minutes, no code required. Awesome FAQ | Pricing | Support | Live Demos Why Awesome FAQ? Awesome FAQ is a lightweight, user-friendly WordPress plugin that lets you create beautiful and responsive FAQ sections using Gutenberg Blocks or shortcodes. It’s perfect for bloggers, business owners, online shops, portfolios, and anyone who needs a simple and elegant way to display frequently asked questions. FAQ Schema (JSON-LD) is built right in. With one click, your FAQs are marked up with Google-recommended structured data – increasing the chances of rich results and “People Also Ask” snippets in search engines. No extra SEO plugin needed. An analytics dashboard also shows which questions get the most views, clicks, and engagement, so you can continuously improve your content. The Pro version goes further with an AI-powered FAQ generator: draft product FAQs for WooCommerce using OpenAI (GPT-4o), Anthropic (Claude Sonnet), or the native WordPress 7.0 Connectors API, and generate Q&A content with custom layout prompts right inside the Block Editor. Free Features 7 Modern FAQ Themes: Clean, professional accordion designs, free forever. Fully Responsive: Looks great on all devices out of the box. Two Column & Horizontal FAQ: Flexible layout choices beyond the standard accordion. Gutenberg Block Support: Add and customize FAQs visually in the block editor. Shortcode Support: Place FAQ sections in any page, post, or widget. FAQ Schema SEO: Google-recommended JSON-LD markup for rich results. AI-Powered Answer Generation: Generate answers for your FAQs. Smooth Animations: Polished open/close transitions. Fast and Lightweight: Optimized code with minimal footprint. Easy to Use: No coding needed, and 100% ad-free. Pro Version – AI Power & Advanced Layouts Upgrade to Awesome FAQ Pro for advanced customization, automated layout generation, and AI power. Pro features include: More Premium FAQ Templates: Exclusive interactive, pre-designed accordion layouts. Category & Filter FAQ: Organize your FAQs with filterable tabs for a cleaner presentation. FAQ Search System: Real-time live search bar so users find answers instantly. Multi-Column FAQ Grid: Multi-column and grid layouts to present FAQs beautifully. Design & Typography Controls: Full control over backgrounds, text colors, icons, borders, margins, and typography. AI-Powered Product FAQ Builder: Generate product-specific FAQs in seconds using OpenAI (GPT-4o), Anthropic (Claude Sonnet), or the native WordPress 7.0 Connectors API. WooCommerce Product FAQ Integration: Show custom FAQ sections directly on product pages, in a dedicated product tab or below the product summary. Block Editor AI Builder: Auto-generate Q&A content and dynamically customize layout designs, colors, and backgrounds in Gutenberg using custom prompts. Global Settings Panel: Configure AI models, API keys, and display options under WooCommerce → Settings → FAQ AI Settings. Analytics Dashboard: Track user interactions, views, and clicks to optimize your questions and answers. New: Ask AI Block – Interactive AI answer assistant that answers visitor questions instantly using your FAQ content, complete with source citations and user feedback. New: Bento FAQ Block – Modern asymmetric bento grid layout for FAQ cards with interactive focused modal previews, custom card sizing, and scroll animations. New: Nested FAQ Block – Multi-level accordion structure allowing sub-questions and multi-tier Q&A hierarchy with separate parent/child design controls. New: Ask AI Dashboard – Centralized admin dashboard for managing AI provider settings, custom system prompts, real-time query logs, token usage, and visitor feedback analytics. AI-Powered FAQ Builder Awesome FAQ Pro includes AI-powered tools for creating FAQ content. You can generate Q&A content directly inside the Gutenberg editor using custom prompts. For WooCommerce products, the AI FAQ builder can generate product-specific questions and answers using supported AI providers. Supported AI providers include: OpenAI (GPT-4o) Anthropic (Claude Sonnet) Native WordPress 7.0 Connectors API The AI features are designed to help you create FAQ content faster while still allowing you to review and edit the generated content before publishing. WooCommerce Product FAQs With Awesome FAQ Pro, you can add FAQs directly to WooCommerce product pages. Choose where your FAQ section appears: In a dedicated product tab Below the product summary You can write product FAQs manually or use the AI-powered product FAQ generator to create an initial set of questions and answers. This is useful for: Product specifications Shipping questions Return policies Product usage Compatibility questions Warranty information Customer support questions FAQ Analytics Awesome FAQ Pro includes an analytics dashboard that helps you understand how visitors interact with your FAQ content. Track: FAQ views Question clicks User interactions Popular questions Engagement Use these insights to identify the questions visitors care about most and improve your FAQ content. Ask AI block features (Pro) Answers from your own content only – the model receives your matching FAQ snippets and is told to reply from them, so it cannot invent an answer. Source citations – every answer can list the FAQ entries it was built from, which is what makes visitors trust it. Rotating placeholders – example questions cycle through the empty field so visitors know the box is worth using. Suggested question chips – clickable questions under the field that answer instantly. Visitor feedback – a customisable question with 👍/👎 buttons, so you can see which answers miss. Fallback link – send anyone the assistant could not help to your contact or support page. Disclaimer line – editable AI notice under the box. No answer, no guess – when nothing is close enough, the visitor gets related questions instead of a made-up answer. Full design control – colors for every part (heading, input, chips, answer box, labels, sources, feedback text), typography, background, borders, padding, and alignment. Ask AI Dashboard (Pro) Everything the assistant does is reported under Awesome FAQ → Ask AI, built around the two questions a site owner actually has: what is this costing me, and what are people asking that I have not answered yet. Dashboard Features: Questions today with a trend against the previous 7 days. Answered for free – how many replies came from the cache or straight from a FAQ, so cost nothing. AI calls today against your daily allowance. Unanswered – questions no FAQ covered. Found helpful – 👍 and 👎 totals from visitors. A daily bar chart splitting every answer into cached, from a FAQ, and answered by AI, so you can see whether questions are growing and how much of the load stays free. How to Use Awesome FAQ – Quick Start Using the Gutenberg Block: Open a page or post in the block editor. Click the Add Block (+) button and search for Awesome FAQ. Add the block, then choose a theme and set colors, icons, typography, and toggle options. Add your questions and answers. Publish – your FAQ section is live! Using a Shortcode: Go to Awesome FAQ → Add New FAQ in the dashboard. Enter your questions and answers, assign categories if needed, and click Publish. Copy the generated shortcode and paste it into any post, page, or widget. Using WooCommerce Product FAQs (Pro): Edit a WooCommerce product and scroll to the Product FAQ — Awesome FAQ box. Check Show FAQ Section on This Product. Write FAQs manually or click Auto-Generate from Product to draft them with AI. Pick a theme, click Update, and configure global options at WooCommerce → Settings → FAQ AI Settings. Use Cases Awesome FAQ can help solve common content and customer-support needs. Product FAQs – Answer common product questions before customers contact support. Service FAQs – Explain services, pricing, policies, and processes. SaaS FAQs – Answer questions about software features, plans, integrations, and onboarding. WooCommerce FAQs – Provide product-specific information directly on product pages. Support FAQs – Reduce repetitive questions by making common answers easy to find. Documentation FAQs – Organize common questions for documentation and help centers. Blog FAQs – Add useful Q&A sections to blog posts and articles. Agency FAQs – Explain services, workflows, pricing, and project processes. Portfolio FAQs – Answer questions about services, experience, projects, and availability. Love the plugin? Want new features? Need support? Send your feedback ⭐ Check out our other WordPress Plugins 🔥 Html5 Audio Player – Best audio player plugin for WordPress. 🔥 Html5 Video Player – Fully customizable video player plugin. 🔥 PDF Poster – Display PDFs beautifully on your website. 🔥 StreamCast – Powerful radio player plugin. 🔥 3D Viewer – Display interactive 3D models easily.