Getting Started
Logging In To Your HelpDocs
Setting the URL Style for your Articles
Understanding Smart 404 Pages
The HelpDocs Trial
Adding or Changing Your Profile Image
Switching Between Multiple Accounts
Understanding Top Articles
Setting Up a Custom Domain
Managing Users
Writing and Editing Articles
Stale Articles
Text Editor
Content Blocks
Adding an HTML Block
Inserting Videos
Using Markdown Blocks
Embedding Audio Files
Using Code Blocks
Getting Started with Content Blocks
Using Quote Blocks
Moving an Article to a Different Category
Inserting Images into Ordered Lists
Inserting Images
Adding Note, Tip, and Warning Callouts
Switching the Editor Mode
Adding Tags to Articles
Article Backups, Revisions, and Versioning
Using Ordered Lists
Understanding Article Statuses
Adding Buttons
Using Folds
Unassigned Articles
Text Editor Shortcuts
Managing Clips
Using help.new to Create Articles
Editing Images
Previewing Articles
Linking to a Part of an Article
Understanding Search Results
Hidden Categories
Creating a Subcategory
Adding a Table of Contents
Filtering Articles
Featuring an Article
Restoring Deleted Articles
What is Readability?
Incompatible Browser Extensions
Editing Category Metadata
Exporting & Backing Up Your Articles
Collaborating on Articles with Presence
Hiding Articles from Public Search Engines
Delete a Category
Downloading Articles to PDF
Creating Draft Versions of Published Articles with Working Copy
Bulk Select & Edit Multiple Articles
Setting Up Integrations
Front Integration
Slack Integration
Configuring Your Slack Integration
Sharing Articles From HelpDocs to Slack
Installing the Slack Integration
Get Feedback, Activity, and Contact Form Notifications in Slack
Available Commands in Your Slack Workspace
Intercom Integration
Drift Integration
Chrome Extension
Connecting Hyperping
Connecting Sunshine Conversations
Connecting Doorbell
Enabling Comments with Disqus
Adding FullStory
Syncing Content to elevio
Connecting Belco
Connecting Crisp
Connecting Statuspage
Connecting Chatra
Connecting Google Analytics
Adding a Feedier Carrier
Connecting Lucidchart
Adding Hotjar
Connecting LiveChat
Using HelpDocs with Ticketing Systems
Connecting Kommunicate
Connecting Segment
Connecting Gainsight PX
Connecting Gorgias
Connecting GoSquared
Customizing your HelpDocs
Code Snippets
Making Your Printed HelpDocs Look Nicer
Customizing Feedback Icons
Add HTML Before the Closing Body Tag
Adding Lightboxes to Images
Making Tables Scroll When They're Too Wide for the Page
Using a Background Image in the Header
Disabling Related Articles
Using Different List Styles
Overriding the Font on Your Knowledge Base
Using HelpDocs with RTL Languages
Disabling Top Articles
Getting Help with Code Snippets
How to Add Extra Spacing
Condense Top Article Spacing on Bars V4
Disabling Authorship and Updated Times
How to Change the Logo Link
Making Video Embeds Responsive
Custom HTML Templates
Understanding the Contact Form
Adding Custom JavaScript
Testing Customizations with .dev
Choosing a Template
Adding an Open Graph Fallback Image
Changing the Language in Common Phrases
Customizing an Article Slug, Meta Description & Short Version
Hosting HelpDocs at a Subfolder of Your Site
Adding Icons to Categories
Featuring a Category
Adding URL Redirects
Uploading Your Brand Logo
Adding Custom CSS
Setting Category Display Order
Hiding the Contact Button
Setting a Custom Favicon
Adding Custom Navigation Links
Adding Cookie Consent
Setting Article Display Order
Multilingual Translation
Understanding Multilingual Translation
Setting Up Multilingual
Translating Articles
Translating Categories
Automatically Translate Articles with Machine Translations
Permissioning
Removing Permission Groups from Articles
Assigning Permission Groups to Categories
Creating and Managing Permission Groups
Assigning Permission Groups to Articles
Getting Started with Permissioning
Authentication
Setting Up and Using SAML Single Sign-On
Using OpenID Connect for Single Sign On
Accessing User Data in HelpDocs
Shared Password Protection
Configuring Slack Single Sign On
Restricting Your Docs to Logged In Users
Restricting your HelpDocs with Custom JWT SSO
Data & Analytics
Getting Team Event History with Audit Trail
Filtering Analytics
Exporting Your Stats
What is the Happiness Score?
What are Tickets Avoided?
Understanding Articles Clicked
Lighthouse
Adding Lighthouse Trigger Buttons to Webflow
Installing Lighthouse
Understanding Lighthouse
Lighthouse Widget API
Integrating Lighthouse with Live Chat Providers
Billing
Tax Residency Certificates and Forms
Changing Your Plan
Subscribing to a Plan for the First Time
Cancelling Your Account
Updating Your Billing Information
European Union VAT Charges
Invoices and Email Receipts
FAQs
Is my data secure and protected?
I’m seeing a blank screen when I load my knowledge base
I've added a script but it isn't working
Help! My app's not loading 😭
Can I host my internal docs in HelpDocs?
My Article Has a Blank Space to the Left. What's Wrong?
Can I Change the HelpDocs Branding?
Can I migrate or import my data from another service?
Can I host my API docs in HelpDocs?
How do related articles work?
How do I reset my password?
What is an account slug?
Help! No articles are appearing on my knowledge base
I can't log into my HelpDocs account
Will translated articles be deleted if I remove that language?
Is HelpDocs GDPR compliant?
How do I change my email?
Who counts towards the user limit on plans?
One of my headings isn't showing in the table of contents
Can I embed files into HelpDocs?
Why isn't my contact form showing up?
I'm getting 'Your connection is not private' on my custom domain
How do I publish an article that's not available in the default language?
HelpDocs Support Scope
Can I use multiple HelpDocs accounts together?
Guides
Finding CSS Selectors in Your Browser
Clearing the Cache in Your Browser
Creating a Knowledge Base from Scratch
Optimizing Your Knowledge Base for Search
Writing Clear and Digestible Knowledge Base Articles
Resources
Table of Contents
- Knowledge Base
- Customizing your HelpDocs
- Custom HTML Templates
- Getting Started with a Custom HTML Template
Getting Started with a Custom HTML Template
Updated
by Jake Peters
HelpDocs ships with a bunch of nice looking templates that work great out of the box. You can customize our default templates easily with CSS and JavaScript to make them look however you like. But if you wanna make large changes to the layout, that's where custom HTML templates come in.
Handlebars
We use Handlebars to give our HTML templates superpowers. Handlebars lets you do things like loop through arrays of tags and authors, and output HTML for each. It also lets you register and reuse partials which cleans up your HTML no end.
If you're not familiar with Handlebars you should check out the official documentation. HelpDocs templates are compatible with all the syntax of Handlebars v3, with the addition of Inline Partials from Handlebars v4.
We also support a number of helpers for Handlebars. We've built these helpers in-house to make common tasks like internationalization easier. You can read more about our helpers here.
Enabling Custom HTML Templates
You can enable custom HTML templates in Settings > Brand. Choose Custom from the Template dropdown.
Once you've enabled custom templates you'll get access to a new tab in Settings > Code called HTML. This is where you'll manage the HTML and Handlebars for each partial of your knowledge base.
Partials
Since you only have to provide the content for each page, not the whole HTML (include <head>
tags, <link>
s, etc.), we call each section you can edit a partial. There's 7 total partials, 6 of which you can edit. Here's a breakdown of what you'll find in Settings > Code > HTML.
Partial Name | Purpose |
default.hbs | This is the default template that includes the main layout of the HTML. It's maintained by us here at HelpDocs and isn't user editable. This is where we insert metadata for SEO, our required JavaScript libraries, add your integrations, etc. |
header.hbs | You should add your header bar and navigation in here. This appears on every page of your knowledge base. Depending on how you wanna structure your template, this might also be the right place for your search bar and maybe some secondary navigation like a sidebar. If you need to register inline partials for use in all templates, here's a good place to do that too. |
footer.hbs | This gets added after your main content (e.g. after the category or article that's being displayed). You can use this to mirror the footer on your main website, or add any scripts to your site that you want before the closing |
home.hbs | The entry point of your knowledge base. This is where you display all your categories, so users can easily navigate to a category or article. |
category.hbs | Display a single category and all its articles. |
article.hbs | Display a single article. |
search.hbs | Display search results. Custom templates ship with instant search as standard, but this page is shown when someone hits return in the search bar regardless. |
Context Data by Partial
We pass through context data you can use in the templates. This differs slightly on each partial so you only have the information that's actually relevant to that page. Data can be accessed using Handlebars data accessors, e.g. <<categories>>
Data | Example | Available in Partial(s) |
categories | [Category] | home.hbs |
category | { | category.hbs, article.hbs |
article | { | The full article object is available in article.hbs. In other partials, some fields (notably |
search_term | "My super awesome search term" | search.hbs |
meta | { | meta is available on all partials, but some of its attributes may not be available on some partials. Notably top_articles is only available in home.hbs and related_articles is only available in article.hbs. |
user | { | All partials. If there's no logged in user this will be empty. |
Starter Templates
It's not always fun, desirable, or time-sensible (totally a phrase now 😹) to create a template totally from scratch. Here's a few of our default layouts you can start with. They're in .zip files, so just unzip, and follow the instructions in Readme.md.