Put questions and answers from your help center right on your own pages, such as your pricing or signup page. You write each answer once in HelpCenter.io, and every page that shows it stays up to date.
Who can do this: Owners and Admins · Plans: All plans
FAQ sections show your FAQ articles, the articles with the FAQ type. They're meant for public content, so show only questions you're happy for anyone to read. If you don't have any yet, see Write FAQs and add them to articles.
Create a section
In the left menu, click the gear icon, then Embeddables, and open the FAQ sections tab.
Click New section.
Pick a Section type: Full shows all your FAQs that are in a category, organized by category. Custom shows only the FAQs you pick. You can't change the type later.
Enter a Section title and, if you like, a Section description. With more than one language, use the language switcher in each field to write them in every language.
Under Display on URLs, enter the host name of each website that will show the section, separated by commas, like
www.example.com,app.example.com.Click Create section.
In Display on URLs, enter host names only: no https://, no path such as /pricing and no spaces after the commas. The section loads only on pages whose host matches one of them exactly, so example.com doesn't cover www.example.com. It also loads on your help center's own pages.
The form has three more options: Layout style for Full sections (categories on the left with FAQs on the right, or stacked categories with expandable FAQs), Display section title to show or hide a Custom section's title and description (Full sections always show their title, without the description), and Custom CSS, which styles the section on its share page and in the preview, but not on your own pages.
Choose the questions
A Full section always shows all your published FAQs that are in a category. For a Custom section:
Click Manage FAQs next to the section.
Search your FAQ articles and click one to add it. Click the × on a question to take it out of the section. Each change saves right away.
Add it to your page
A section loads through the widget's snippet, so the page needs that snippet too. If it doesn't have it yet, add it first: see Add the widget to your website.
Click Install next to the section. (Hide code closes it again.)
Click Copy.
Paste the code where the section should appear on your page. It looks like this, with your section's key:
<div class="hc-faq-section" data-id="YOUR_SECTION_KEY" data-type="custom"></div>For a Full section, data-type is full. The section appears when the page loads.
Without the floating widget
To show a FAQ section on a page without the widget's launcher, keep the snippet and add widgetEnabled: false to it:
window.hcOptions = {
app_id: 'YOUR_WIDGET_ID',
widgetEnabled: false
};More options
Another language. Add
langto the snippet, such aslang: 'es', to show the section in one of your other languages.A page of its own. In the section's menu (⋮), Open share page opens the section on a page of your help center, which you can link to.
Preview, Edit details and Delete are in the same menu.
Troubleshooting
The section stays empty. The page's host isn't in Display on URLs exactly as written. Your browser console shows a line starting with [helpcenter] FAQ section and ending with "could not be loaded." Fix the list with Edit details.
Nothing loads at all. Check that the widget snippet is on the same page. In a single-page app, the section's code must be in the page when the snippet loads.
A question is missing. Sections show published FAQ articles only, and on a page in another language, only the questions released in that language. A Full section leaves out FAQs that aren't in any category.
The plus and minus icons next to the questions are missing. They're Font Awesome icons, so the page needs Font Awesome loaded.
Your site sends a Content Security Policy. Sections add their styles to the page, so allow inline styles in style-src. See Content Security Policy and allowed origins on the developer portal.
Comments
Be the first to comment.