About the FAQ Widget
Zyff's FAQ widget builds a frequently-asked-questions section for any website, free. Write your questions and answers, choose an accordion, boxed cards, an always-open list or a two-column layout, add a search box if the list is long, then copy the embed code. It runs entirely in the visitor's browser, so it costs your page nothing on load, and the output is one div and one script tag that works in WordPress, Shopify, Wix, Squarespace, Webflow or a hand-written HTML page alike — no plugin, no account and no API key.
How to add an FAQ section to your website
Write your questions
Add up to 30 questions with their answers, and reorder them so the ones people actually ask come first. Line breaks in an answer are kept, and the text is never treated as HTML.
Pick a layout
An accordion collapses each question to one line, boxed cards give each its own panel, the open list shows every answer at once, and two columns fits more above the fold on wide screens.
Decide how it behaves
Choose whether opening one answer closes the others, whether the first answer starts open, and whether to show a search box that matches the answers as well as the questions.
Copy the embed code
Paste the container div and script tag where the questions should appear, or download the standalone HTML file. Check the 390px mobile preview before you ship it.
What the FAQ Widget does
Four layouts
Accordion, boxed cards, an always-open list with nothing to click, and a two-column layout that balances the answers rather than leaving a ragged grid, then stacks on phones.
Search that reads the answers
The optional search box matches answer text as well as question text, so someone typing "refund" finds your returns question even though that word only appears in the answer.
Keyboard and screen-reader ready
Each question is a real button carrying aria-expanded and pointing at its own answer region, so the accordion works with a keyboard and announces its state rather than being a div that happens to be clickable.
Your text stays text
Answers are rendered as text with your line breaks preserved, never as HTML, so a stray angle bracket or quotation mark in an answer cannot break the page it is embedded on.
Styled to match your site
Light or dark, four colours, six fonts including inherit from your site, plus question and answer type sizes, corner radius, padding, borders and dividers.
Nothing to slow your page
The whole FAQ runs in the visitor's browser from the settings in your snippet, so it makes no request to Zyff when your page loads, and it can wait until it is scrolled near.
At a glance
| Questions | Up to 30, each with a 200-character question and a 1,200-character answer |
|---|---|
| Layouts | 4 templates: accordion, boxed cards, open list, two columns |
| Search | Optional; matches both questions and answers |
| Behaviour | One answer at a time or many, first answer open, chevron or plus icon on either side |
| Styling | Light or dark, 4 hex colors, 6 fonts, questions 12-26px, answers 11-22px |
| Output | One container div plus one script tag, or a downloadable HTML file |
| Price | Free to build; paid plans for saved widgets |
Frequently asked questions
How do I add an FAQ section to my website?
Write your questions in Zyff's FAQ builder, pick a layout, then copy the generated embed code into your page. The whole flow is free with no signup. The snippet is plain HTML, so it drops into any CMS block that accepts custom code — a WordPress Custom HTML block, a Shopify section, a Squarespace code block, or a Wix or Webflow embed.
Will an FAQ widget help my SEO?
Treat it as a usability improvement rather than a ranking tactic, and be wary of any tool that promises otherwise. Google restricted FAQ rich results to health and government sites in 2023, so the star-style FAQ snippet most guides still describe is not available to an ordinary business site. What a good FAQ does earn is fewer support emails and visitors who find their answer instead of leaving.
Is a collapsible FAQ bad for SEO because the answers are hidden?
No. Google has said for years that content inside an expandable section is indexed and weighted the same as visible content, so an accordion does not cost you anything. If you would rather not rely on that at all, the open-list layout shows every answer at once with nothing to click.
Does the FAQ accordion work with a keyboard and screen readers?
Yes. Each question is a real button rather than a clickable div, it carries aria-expanded so its state is announced, and it points at its own answer region. That means tab and enter work as expected and a screen reader describes what opening a question does.
Can visitors search the FAQ?
Yes, with an optional search box. It matches the answer text as well as the question text, which matters more than it sounds: people search for the word that describes their problem, and that word is usually in the answer rather than the question.
How many questions can I add?
Up to 30, each with a question of up to 200 characters and an answer of up to 1,200. There is no lower limit on the free plan — capping how many questions a free FAQ may hold would make it useless for the one job it has.
Can I use HTML or links in the answers?
No, and deliberately. Answers are rendered as plain text with your line breaks preserved, because this snippet runs on your visitors' browsers and anything that interpreted your text as markup would be a way to inject code into your own page. If an answer needs a link, put the URL in the text.
Where do I paste the FAQ embed code?
Wherever the questions should appear — a support page, the bottom of a product page, or a dedicated FAQ page. Put the container div in that spot and keep the script tag with it.
Is the FAQ widget really free?
Yes. Building an FAQ, styling it and embedding it are free with no signup, no trial and no watermark — a free embed carries a small "FAQ by Zyff" link, which is how the tool stays free. Search and the full 30 questions are free too. An optional account saves a widget so you can edit it later and have every site embedding it update at once, and a paid plan adds the boxed and two-column layouts, full colour control and removes the attribution link.