Getting Started
Setting Up a Custom Domain
Managing Users
Setting or Updating the Name in Your Profile
Can I Schedule a Demo?
The HelpDocs Trial
Setting the URL Style for your Articles
Switching Between Multiple Accounts
Adding or Changing Your Profile Image
Logging In To Your HelpDocs
Understanding Smart 404 Pages
Understanding Top Articles
Writing and Editing Articles
Stale Articles
Text Editor
Content Blocks
Inserting Videos
Adding an HTML Block
Using Markdown Blocks
Adding Embeddables
Using Code Blocks
Getting Started with Content Blocks
Using Quote Blocks
Inserting Images
Understanding Article Statuses
Article Backups, Revisions, and Versioning
Managing Clips
Text Editor Shortcuts
Adding Tags to Articles
Using Folds
Using Ordered Lists
Moving an Article to a Different Category
Inserting Images into Ordered Lists
Adding Note, Tip, and Warning Callouts
Switching the Editor Mode
Adding Buttons
Unassigned Articles
Understanding Search Results
Duplicating an Article
Incompatible Browser Extensions
Filtering Articles
Downloading Articles to PDF
Deleting an Article
What is Readability?
Collaborating on Articles with Presence
Adding a Table of Contents
Restoring Deleted Articles
Editing Category Metadata
Exporting & Backing Up Your Articles
Hiding Articles from Public Search Engines
Delete a Category
Featuring an Article
Creating Draft Versions of Published Articles with Working Copy
Bulk Select & Edit Multiple Articles
Creating a Subcategory
Hidden Categories
Linking to a Part of an Article
Previewing Articles
Using help.new to Create Articles
Editing Images
Setting Up Integrations
Front Integration
Slack Integration
Available Commands in Your Slack Workspace
Get Feedback, Activity, and Contact Form Notifications in Slack
Installing the Slack Integration
Sharing Articles From HelpDocs to Slack
Configuring Your Slack Integration
Intercom Integration
Drift Integration
Chrome Extension
Connecting Heap
Connecting Google Analytics
Adding a Feedier Carrier
Adding Hotjar
Connecting Gorgias
Connecting Lucidchart
Connecting GoSquared
Connecting Gainsight PX
Connecting Segment
Connecting Kommunicate
Using HelpDocs with Ticketing Systems
Connecting LiveChat
Connecting Chatra
Connecting Statuspage
Connecting Crisp
Connecting Belco
Syncing Content to elevio
Adding FullStory
Enabling Comments with Disqus
Connecting Doorbell
Connecting Sunshine Conversations
Connecting Hyperping
Customizing your HelpDocs
Code Snippets
Condense Top Article Spacing on Bars V4
Adding Lightboxes to Images
Overriding the Font on Your Knowledge Base
Making Your Printed HelpDocs Look Nicer
Making Video Embeds Responsive
Disabling Authorship and Updated Times
Getting Help with Code Snippets
Disabling Top Articles
Using Different List Styles
Using HelpDocs with RTL Languages
Disabling Related Articles
Using a Background Image in the Header
Making Tables Scroll When They're Too Wide for the Page
How to Change the Logo Link
How to Add Extra Spacing
Add HTML Before the Closing Body Tag
Customizing Feedback Icons
Custom HTML Templates
Customizing an Article Slug, Meta Description & Short Version
Understanding the Contact Form
Changing the Language in Common Phrases
Hiding the Contact Button
Adding Custom CSS
Setting Article Display Order
Adding Custom Navigation Links
Setting a Custom Favicon
Setting Category Display Order
Uploading Your Brand Logo
Adding URL Redirects
Featuring a Category
Adding Icons to Categories
Hosting HelpDocs at a Subfolder of Your Site
Adding an Open Graph Fallback Image
Choosing a Template
Testing Customizations with .dev
Adding Custom JavaScript
Adding Cookie Consent
Multilingual Translation
Machine Translations
Understanding Machine Translation Credits
Customizing How Machine Translations Work
Automatically Translate Articles with Machine Translations
Setting Up Multilingual
Understanding Multilingual Translation
Translating Categories
Translating Articles
Permissioning
Creating a Read-Only Permission Group for Public Articles
Creating and Managing Permission Groups
Getting Started with Permissioning
Assigning Permission Groups to Categories
Assigning Permission Groups to Articles
Removing Permission Groups from Articles
Authentication
Setting Up Two-Factor Authentication
Setting Up and Using SAML Single Sign-On
Restricting your HelpDocs with Custom JWT SSO
Using OpenID Connect for Single Sign On
Configuring Slack Single Sign On
Restricting Your Docs to Logged In Users
Shared Password Protection
Accessing User Data in HelpDocs
Data & Analytics
Filtering Stats
Getting Team Event History with Audit Trail
Understanding Articles Clicked
What are Tickets Avoided?
Exporting Your Stats
What is the Happiness Score?
Lighthouse
Understanding Lighthouse
Lighthouse Widget API
Integrating Lighthouse with Live Chat Providers
Installing Lighthouse
Adding Lighthouse Trigger Buttons to Webflow
Billing
Cancelling Your Account
Downloading Invoices and Receipts
Updating Your Billing Information
Changing Your Plan
Subscribing to a Plan for the First Time
European Union VAT Charges
Tax Residency Certificates and Forms
FAQs
I can't log in to my HelpDocs account or complete signup
How do I reset my password?
How do I change my email?
Can I use multiple HelpDocs accounts together?
Can I migrate or import my data from another service?
Who counts towards the user limit on plans?
Can I Change the HelpDocs Branding?
Can I have a single article appear in multiple categories?
Can I host my internal docs in HelpDocs?
I’m seeing a blank screen when I load my knowledge base
Help! No articles are appearing on my knowledge base
What is an account slug?
I've added a script but it isn't working
Help! My app's not loading 😭
Can I embed files into HelpDocs?
How do related articles work?
Can I host my API docs in HelpDocs?
Will translated articles be deleted if I remove that language?
My Article Has a Blank Space to the Left. What's Wrong?
One of my headings isn't showing in the table of contents
I'm getting 'Your connection is not private' on my custom domain
HelpDocs Support Scope
How do I publish an article that's not available in the default language?
Why isn't my contact form showing up?
Guides
Optimizing Your Knowledge Base for Search
Creating a Knowledge Base from Scratch
Finding CSS Selectors in Your Browser
Clearing the Cache in Your Browser
Writing Clear and Digestible Knowledge Base Articles
Resources
Security & Compliance
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 Taylor Sloane
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.