Help Center Pro

What it is

A help center for HubSpot CMS that lives in a single module. Drop it on a page such as /help and the page becomes a home page, a page per category, a page per article and a search results page. Categories, articles, screenshots, videos, tags and every word on screen are fields in the page editor. Everything is stored in the module itself, with no separate database or blog to set up, so it runs on any HubSpot plan that has pages.

Where the content lives

Categories are a repeater. Each category holds a repeater of articles, and each article holds a repeater of content blocks. Per category you set a name, a web-address name, a line of description, an icon and a tint. Per article:

The module takes up to 24 categories and up to 60 articles in each. A help center of about 150 articles loads and searches without trouble. Past that, split it across two pages.

The views

Home

A search hero with a heading, a line under it and popular searches that run when clicked. Under it come the categories, popular articles, recently updated articles and video tutorials, each with its own switch and heading. An announcement line above the hero links to an article, a category, a search or any address. The order of the fixed blocks is a choice of presets, so the page cannot be pulled out of shape.

Home sections

Bands of your own, placed at the top, between the fixed blocks or at the bottom. Each band has a heading, a type, a column count, a card style and an icon style:

• Category cards, built from your categories with their article counts.
• Article cards and link cards, each pointing at a category, an article, a search or any address, with an optional badge such as Step 1.
• Icon list, compact links with an icon each.
• Video cards.
• Feature banner, an image with a heading, a line of text and a button.

Category

The category's icon, name, description and article count, then its articles grouped by section, in the order you entered them. Tag chips above the list narrow it to the articles with those tags, and a Clear button resets them. The chosen tags are in the address too. The other categories sit in a sidebar, which becomes a menu button on smaller screens.

Article

Breadcrumbs, the title and summary, the updated date, the reading time worked out from the words, and the author. A table of contents built from the headings in the article follows the reader down the page and marks the section in view. Each heading carries a button that copies a link to it. At the foot: Was this helpful?, tags, related articles, the previous and next article in the category, and print and copy-link buttons.

Search

Results appear as the visitor types, grouped by category with the matching words marked. Enter or See all results opens the full results view, with a chip per category to narrow it and a count. When nothing matches, the visitor sees suggested articles and the contact strip.

Layouts

This page shows one setup. Every other one is a choice on the Layout and Pagination groups of the Content tab, and every combination works together.

Home categories

• Card grid. A card per category with its icon, description and article count, as on this page. Two, three or four columns, set on Category columns.
• Rows. One category per line, full width, with the count and an arrow on the right. Suits a short list of topics.
• Sidebar and articles. The categories as a list on the left, the popular articles beside them. Suits documentation, where visitors know what they want.
• Tabs, one per category. A tab row with the articles of the chosen category under it, so visitors see answers without leaving the home page.

Card style and icon style

Card style applies to category cards and article cards: Bordered with a hairline edge, Filled on a muted panel, Elevated with a shadow, or Minimal with the icon and words and no box. Each home section can keep that style or pick its own. Icon style is set per home section: a plain icon, a tinted tile, a circle, or a large tile or image for illustrated cards.

Article lists

• Rows. Title, summary, tags and date on each line, as in the categories on this page.
• Cards. A grid of cards with the title and summary.
• Compact list. Titles only, for long lists of short articles.
• Questions that open in place. Each article is a question that opens its answer under it, like an FAQ page.

Where an article opens

• On its own view. The article replaces the list, with the sidebar and table of contents around it, as on this page.
• In a pop-up. A dialog over the list, with the table of contents at the top.
• In a side panel. A panel from the right. Its width and whether it floats with a gap around it are fields.
• In place, in the list. The answer opens under its question. This choice turns the lists into questions.

An article in a pop-up or a side panel changes the address, so a shared link opens the same pop-up or panel, and closing it puts focus back on the link that opened it. An answer that opens in place leaves the address alone. A link to it opens the answer on a view of its own.

Search results

• Under the search box. A dropdown of results as the visitor types, as on this page.
• On a results view. Enter opens a full page of results with category chips and pages.
• In a search pop-up. A command palette over the page, opened from the search box or with Ctrl K, ⌘ K or /.

Sidebar and table of contents

Category sidebar sits on the left, on the right, or is hidden. Below the width on Sidebar becomes a menu below, it turns into a Categories button. On this page sits right of the article, above it, or is hidden, and Contents moves above the article below sets where it moves to the top on narrower screens.

Pagination

A category or a set of search results longer than Items per page is split up in one of three ways: Page numbers, as in the categories on this page, Previous and next, or a Load more button that adds the next set under the ones already shown. The page number is in the address. Keyboard focus moves to the first new article, and screen readers hear which page they are on. The lists on the home page have a count each instead.

Content blocks

An article is a list of blocks in any order. Pick the type on each block and only its fields show.

• Text. Rich text. Its headings feed the table of contents.
• Image. With a caption, in a browser window frame, a phone frame or no frame. Click to open it full size, unless the lightbox is off.
• Video. A HubSpot video, or a YouTube or Vimeo address, with a poster image and a caption. Play opens the video in a player pop-up over the page, with its title and a link to the article, and the page address changes so the video can be shared. The player loads only then, so a page with videos stays light. Video cards open on the Settings group sends video cards to the article instead.
• Steps. Numbered for you. Each step has a title, text and an optional screenshot.
• Callout. Note, tip, warning or important, each in its own colour and icon, with an optional title.
• Code. Code with a language label and a copy button.
• Accordion. Questions that open their answers.
• Divider. A line between parts of an article.

Search

Search runs in the visitor's browser on an index the page carries with it, so results come back without a request to a server. It looks at titles, summaries, tags, sections, category names and the opening of each article's body, and ranks title matches first. How much of the body it reads is the Article text searched field: more text finds more and makes the page heavier.

• Typos. A word with one letter wrong still finds its article. Switch this off with Allow one typo per word.
• Words that mean the same. One rule per line on the Synonyms field, such as invoice = bill, receipt. A search for bill then finds the invoice articles.
• Keyboard. The arrow keys move through the results, Enter opens one and Escape closes the list. With shortcuts on, / and Ctrl K or ⌘ K jump to the search box, or open the search pop-up. When several help centers share a page, the first one with shortcuts on owns them.

Addresses

Every view has its own address, so a category, an article or a search can be linked, bookmarked and shared: /help?hc-category=billing, /help?hc-article=change-your-plan, /help?hc-q=invoice. The page is built on HubSpot's servers for each address, so every view works with JavaScript off. With JavaScript on, the module swaps views in place after the first load, without reloading the page.

The start of each address is a choice on the Link prefix field, hc by default. Two help centers on one page need a prefix each. Any other parameters on the address are kept, so campaign tags survive a click from one article to the next.

Search engines

Every view shares the page's canonical address, so search engines index the help center as one page and articles do not rank as pages of their own. For articles that need to rank on their own, publish them as pages or blog posts and link to them from a link card. The module writes structured data for the view on screen: BreadcrumbList on categories and articles, TechArticle on articles, and FAQPage on an article with an accordion block. Switch it off on the Settings group if another tool writes it for you.

The contact strip

A Still need help? band. With a form, it has two columns: a heading, a line of text, up to four contact cards such as support hours, reply time, email and community, a row of team faces with a status line, and a HubSpot form in a card of its own. Every one of those parts is optional. With buttons only, it becomes a single row with details as small pills and one or two buttons. It shows on every view, on the home page only or on articles only, and always on a search that finds nothing. The form sits in the band, or opens in a dialog or a side panel.

Forms built in HubSpot's legacy form editor take the module's styling. Forms built in HubSpot's new form editor render in an iframe with the styling set in that editor.

When a search finds nothing, the words the visitor searched for are typed into the form field you name on Put the search words in this form field, so the question arrives with the message. Leave the form empty and the buttons show alone.

Was this helpful?

Yes and No buttons at the foot of every article. After a No, the visitor sees a line of text you write, a HubSpot form, or nothing. On this page a No opens the same form as the contact strip. The module stores no votes. Each vote is sent to Tag Manager and to your own scripts, described under Tracking.

Tracking

Each search pushes an event named hc_search to the dataLayer for Google Tag Manager, carrying search_term, results and zero_results. A search that finds nothing is the list of articles you have not written yet. Each vote pushes hc_feedback, carrying article, article_title, category and helpful. Both names are fields on the Tracking group. The module also dispatches helpcenterpro:search and helpcenterpro:feedback on the page, with the same values, for any script of your own. A search is counted once the visitor stops typing.

Colours and style

Every colour, font, size, weight, radius, space, width and duration is a field on the Style tab. Colour fields carry opacity as well as a colour, and both are used.

Taken from your theme

The body font, the heading font, the accent, tints 1 and 2, the focus ring, the search highlight and the note callout inherit from your HubSpot theme settings. Dropped on a page, the help center already uses your brand colour and your fonts. Change any of them on the module and that instance keeps its own value.

The accent and its tints

The accent colours links, the current category, the current section in the table of contents and selected chips. Accent text depth darkens it for text, so accent words stay readable on white. Tints 1 to 4 are pale washes for icon tiles. Each category picks Neutral or one of the four tints, which keeps every card in your palette with no colour picked card by card. Tints 1 and 2 follow the accent. Tints 3 and 4 are grey and stone to begin with.

What each group changes

Every word visitors see or hear is a field on the Words group, and every icon on the Interface icons group, so the help center can be translated in full.

Which setup should I use

A page of frequently asked questions

Home categories as Rows, articles opening In place, in the list, and Load more button for pages. Switch off the table of contents, the reading time, the author, related articles and previous and next. Each question is an article with a one-line summary and the answer as a text block.

A help center for a software product

The setup on this page: a Card grid of categories, Rows for lists, articles On their own view, results Under the search box, the sidebar on the left and the contents on the right. Add a getting-started home section with step badges, mark your most-read articles as popular and put a form in the contact strip.

Developer documentation

Sidebar and articles on the home page, a Compact list, articles In a side panel and search In a search pop-up with shortcuts on. Previous and next suits reading in order. Use code blocks with a language label, and synonyms for the words developers search with, such as token = key, secret.

A small business

Tabs, one per category on the home page, Cards for lists and articles In a pop-up, so visitors never leave the home page. A handful of categories with a few articles each is enough. Put your opening hours and address in the contact strip details.

What it looks like before you touch anything

Dropped onto a page, the module shows a help center for a sample product: a search hero on a pale tint, category cards with icons, popular and recent articles and a contact strip with buttons. Articles open in their own view with a table of contents on the right. Fonts and the accent colour come from your HubSpot theme settings, so the section already matches the page around it. In the editor, Show in the editor picks which view you see while you edit: the home page, the first category, the first article or search results.

Accessibility

The search box follows the combobox pattern, so screen readers hear the number of results and the one in focus. After a search or a filter change, the number of results is read out. The current category and the section in view in the table of contents are marked as current. Dialogs and panels hold focus while open, close on Escape and return focus to what opened them. Numbered steps and callouts carry their number and type in words. Buttons that open a new tab say so. Heading levels start at H1 or H2, a field, so the module fits a page that already has its own H1. Every control shows a focus ring in a colour you set.

Reduced motion

A visitor whose device asks for less motion gets dialogs, panels and lists that open without movement, and a table of contents that jumps to a heading without scrolling to it. That follows the visitor's own setting, so it cannot be switched off from the editor.

Troubleshooting

• A link from a card goes to the home page. Its web-address name does not match a category or an article. Copy the name from the address bar of the article itself. In the editor the card carries a note saying so, which visitors never see.
• Two help centers on one page open each other's articles. Give each its own Link prefix.
• A video shows its poster with no play button. The block has no video picked or no address. Check the address is a YouTube or Vimeo link.
• The form does not take the search words. The name on Put the search words in this form field has to be the internal name of a field on the form, such as message.
• A search misses words deep in an article. Raise Article text searched on the Search group.
• The help center does not line up with the rest of the page. Set Maximum width and Side padding on the Style tab's Layout group to your page's container width and gutter.
• The table of contents does not stay in view. An element around the module has overflow: hidden, which stops anything inside it from sticking. Move the module out of that wrapper.
• The page takes a moment to open a new article address. Each address is built on the server the first time it is asked for. Views opened from inside the help center swap in place and do not wait for that.

Notes on this page

One instance of the module, on the same container as the text above it. Planyard, its articles and its screenshots are made up for the demo. The email and community cards go nowhere, and the form under Still need help? is a real HubSpot form on this site. The pictures under Layouts come from the same module with other field values.

The videos are placeholders: public tutorials from YouTube chosen to match each article's subject, standing in for the product's own recordings. No CSS on this page touches the module.