# Embed FAQ sections on your website

_Category: Widget and embeds_

Put questions and answers from your help center right on your own pages, such as your pricing or signup page, in a design that matches your website. 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](https://self.helpcenter.io/content/write-faqs).

## Create a section

1. In the left menu, click the gear icon, then **Embeddables**, and open the **FAQ sections** tab.
2. Click **New section**.
3. 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.
4. 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.
5. 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`. **Shows on** under the field lists the hosts the section will be saved with.
6. Click **Create and design**. The design studio opens on your new section, which starts on the **Slate** template.

![Screen recording. In FAQ sections, click New section. Pick Custom to choose the questions yourself. Give it a title and the website it will appear on. Click Create and design. The design studio opens on your new section.](https://helpcenter-io.s3.amazonaws.com/uploads/self/sdlgjZ3wK0PFTFXwrlYAiNrh2Esnoj8S10qHBM5L.gif)
A Custom section shows only the questions you choose.

The section loads only on pages whose host matches one in **Display on URLs** exactly, so `example.com` doesn't cover `www.example.com`. A scheme or a path you type, such as `https://` or `/pricing`, is dropped when you save. The section also loads on your help center's own pages.

## Design the section

Pick one of 27 ready-made templates and style it to match your brand, without writing any code.

1. Click **Design** next to the section. (A section you've just created opens here by itself.)
2. On the **Templates** tab, pick a template. Each preview shows the section's own questions, or sample questions until it has published FAQs. To narrow the list, pick a layout: **Accordion**, **Cards**, **List**, **Tabs** or **Conversation**.
3. On the **Style** tab, set the **Accent color** and the other options below.
4. Check the preview on a **Light page** or a **Dark page**, and at desktop or phone width.
5. Click **Save design**.

![Screen recording. Click Design next to the section. Pick a template. Each one shows your own questions. In Style, enter your brand color. Click Save design. The design is live wherever the section is embedded.](https://helpcenter-io.s3.amazonaws.com/uploads/self/7oI5dzirPpcSyS7IV9S0nutWL80beoVj9onp7YZm.gif)
The preview is the section as visitors will see it.

Saving updates the section everywhere it's embedded, and the code on your pages stays the same. Each page shows the new design the next time it loads.

### Style options

Which options appear depends on the template you picked.

| Option | What it does |
| --- | --- |
| **Accent color** | The color of links, icons and highlights. Type a hex color such as `#0f766e`, or click a swatch. The first swatches are the template's own color and your widget's colors. |
| **Color scheme** | **Light**, **Dark**, or **Auto** to follow each visitor's light or dark setting. Neon and Terminal are always dark. |
| **Corner radius** | From 0 to 24 pixels. |
| **Expand icon** | A chevron, a plus, an arrow or **None**, for templates whose questions open and close. |
| **Heading font** | **Template default**, **Clean sans**, **Friendly grotesque**, **Editorial serif**, or **Match my website**, which uses the font of the page the section is on. |
| **Show title and description** | Turn it off when your page already has a heading above the FAQs. |
| **Group by category** | A heading for each category the FAQs are filed in, in templates where grouping is optional. It's on for Full sections until you turn it off. Atlas, Pivot and Canopy always group. In a Custom section, grouped FAQs without a category go under "General". |
| **Entrance animation** | Questions glide in as they scroll into view. Visitors who've asked their device for less motion don't see it. |
| **Contact link** | Beacon only: where the button on its contact card goes, a page or a `mailto:` address. Left empty, the button opens your help center. |

**Reset to template defaults** puts every option except **Show title and description** back the way the template has it.

A Light section has no background of its own, so it's hard to read on a dark page. When you preview it on a **Dark page**, the studio says so and offers **Use Dark**. Pick **Auto** instead if your site switches between light and dark.

### Style it with your own CSS

On the **Custom CSS** tab, add CSS for the section. Start every rule with `.hc-faqs-` and your section's key, the class on the section's outer element: the tab shows it with your key filled in. That way the rule applies to this section only and takes precedence over the template's own styles. Templates name their parts `.fq-title` (the title), `.fq-qbtn` (a question that opens and closes) and `.fq-a` (an answer):

```
.hc-faqs-YOUR_SECTION_KEY .fq-title { letter-spacing: -0.02em; }
.hc-faqs-YOUR_SECTION_KEY .fq-a { font-size: 15px; }
```

A rule without that class, such as `.fq-title` on its own, loses to the template's styles. The preview shows your CSS as you type. Custom CSS can be up to 10,000 characters, and it applies wherever the section shows with its template: on your own pages and on its share page.

### Classic sections

Sections created before templates existed show **Classic** in the list, and they keep their look until you pick a template. A Classic section takes its fonts and colors from the page it's on. On its **Style** tab, a Full section has **Layout** (categories on the left with FAQs on the right, or stacked categories with expandable FAQs), and a Custom section has **Show title and description**. Its custom CSS applies on your own pages and in the studio's preview. To switch a templated section back, pick **Classic** at the end of the template list, under **All**.

### Where the design shows

A section's template and style apply on your own pages, on its share page, and in the dashboard's **Preview** and design studio. FAQ sections you add inside an article, and the **FAQs** component on your help center's pages, always take your help center's own look.

## Choose the questions

A Full section always shows all your published FAQs that are in a category. For a Custom section:

1. Click **Manage FAQs** next to the section.
2. 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](https://self.helpcenter.io/content/install-the-widget).

1. Click **Install** next to the section. (**Hide code** closes it again.)
2. Click **Copy**.

![Screen recording. Click Manage FAQs to choose which questions it shows. The × on a question takes it out of the section. Search your FAQ articles and click one to add it. Click Install for the code to paste into your page.](https://helpcenter-io.s3.amazonaws.com/uploads/self/bfJZHpzZw7yQpACGReTZhS6ea9jiwAyjzK27uYBY.gif)
Manage FAQs picks the questions. Install gives you the code.

1. 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.

![Screen recording. Your FAQ section sits right on your own page. The answers come from your help center, so they stay up to date.](https://helpcenter-io.s3.amazonaws.com/uploads/self/8meXBZKIzgFUrBwOuphg0TrEd0UqxDKIV3xBQBMo.gif)
Edit an answer once, and every page that shows it updates.

### 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 `lang` to the snippet, such as `lang: 'es'`, to show the section in one of your other languages.
- **The texts a template adds.** Search boxes, Beacon's "Still need help?" card and the like are in English until you translate them. Change or translate their wording in the **FAQ sections** group of your interface translations: see [Translate buttons and labels](https://self.helpcenter.io/content/interface-translations).
- **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. **Edit details** changes the title, the description and **Display on URLs**.

## Bring a section over from faqs.me

Built an FAQ section on faqs.me? Import it into your help center to manage the answers here and keep your embedded section in sync. Its questions, answers, categories and template come with it.

1. On faqs.me, open your section, choose **Get the code**, then **Import into HelpCenter.io**. A review page opens on HelpCenter.io.
2. Sign in, or click **Start a free trial** and set up your help center first, then come back and continue.
3. Under **Choose your help center**, pick a help center where you are an Owner or Admin.
4. Choose how to import the answers: **As drafts**, to review them before publishing, or **Publish now**.
5. Click **Import FAQ section**.

The import creates a new Custom FAQ section, plus new FAQ articles in your help center's default language. Draft answers appear in the section once you publish them. Click **Review imported answers** to publish them, or **Open FAQ sections** to set where the section is embedded. A section can have up to 100 questions.

## Troubleshooting

**The section stays empty.** The page's host isn't in **Display on URLs** exactly as written. Your browser console shows a line that starts with `[helpcenter] FAQ section` and says it "could not be loaded." Fix the list with **Edit details**. If an entry there still has `https://` or a path in it, click **Update section**: saving reduces every entry to its host name. A section with a template and no published FAQs yet shows nothing at all.

**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 section is hard to read on a dark page.** Its color scheme is Light. Open **Design**, then **Style**, and pick **Dark**, or **Auto** to follow each visitor.

**The plus and minus icons are missing on a Classic section.** They're Font Awesome icons, so the page needs Font Awesome loaded. Templates draw their own icons.

**Your site sends a Content Security Policy.** Sections add their styles to the page, so allow inline styles in `style-src`. Many templates, and the **Friendly grotesque** and **Editorial serif** fonts, also load a web font from `https://fonts.bunny.net`: allow it in `style-src` and `font-src`, or the section falls back to a system font. See [Content Security Policy and allowed origins](https://developers.helpcenter.io/content/content-security-policy) on the developer portal.

## Related articles

- [Write FAQs and add them to articles](https://self.helpcenter.io/content/write-faqs)
- [Add the widget to your website](https://self.helpcenter.io/content/install-the-widget)
- [Translate buttons and labels](https://self.helpcenter.io/content/interface-translations)
- [Choose which websites can show the widget](https://self.helpcenter.io/content/embedding-origins)