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
- Code Snippets
- Using a Background Image in the Header
Using a Background Image in the Header
Updated
by Jarratt Isted
When you set up your HelpDocs you'll get your primary color as the background for your header. You might want to change this to a photo background to match your brand and the style of your main website.

Adding an Image to the Header Background
- Have the URL of the image you want to use ready
- In HelpDocs, check the template you're using by going to Settings > Brand and looking at the selected option under Template
- Head to Settings > Code > CSS
- Select the following template you're using below and paste in the code, replacing
IMAGE_URL
with the image URL you have ready
If you know your CSS, you could use the
filter: brightness(50%);
property to adjust it in the browser, although this isn't supported in earlier versions of browsers.If your image is too large you might run into issues with your knowledge base taking a long time to load. Reduce the size of your image (less than 1500px by 500px) and use a tool like PNG Compressor to reduce it even more.
V4
Bars
#homeBanner {
background-image: url('IMAGE_URL');
}
V3
Curve
#main[data-hd-template="curvev3"] #header .bg-faded {
background-image: url('IMAGE_URL');
}
Boxed Instant
#main[data-hd-template="boxedinstantv3"] #header {
background-image: url('IMAGE_URL');
}
eCommerce
#main[data-hd-template="ecommercev3"] #header {
background-image: url('IMAGE_URL');
}
Bars
#main[data-hd-template="barsv3"] #header {
background-image: url('IMAGE_URL');
}