Import from HTML
Importing From HTML
ClickHelp allows importing content from HTML files.
To do this, follow the steps below:
-
Go to the Author Dashboard page and click the Import Document button.
-
Choose HTML zipped from the list of formats and pick whether you want to create a new project or add the imported topics to an already existing one.
If you've chosen to create a new project, give this project a new name and URL of your choice. - Click Next.
-
Drag&drop your archive or browse your way to it. It will appear on the list of uploaded files.
- Set up the import details.
Tip If you are importing an HTML archive into an existing project, you'll be offered to decide where to store the imported images. Consider creating a separate folder for your imported images to improve your project's file structure and make it easier to handle in the future. -
Choose the correct
Topics Encoding
on the right side of the
Wizard
or just leave the
Auto Detect
setting.
- Choose the way how the imported document will be split into topics.
- Click Next and wait for the Wizard to complete importing your documents.
-
Click
Next
to open the final step of the import process - you will see the links to your imported project and style files.
This is how you can configure and complete your HTML documents import in ClickHelp .
Preparing HTML For Import And TOC Hierarchy
To prepare your content for the import, you need to create a .zip archive with all the necessary files included (HTML, CSS, JS, images).
The TOC created by ClickHelp depends on the hierarchy of folders containing the HTML files in the archive you are importing. It means that your TOC can be organized differently based on the archive folders. Let's take a look at some import examples:
All the HTML files are on the same level, in one folder of the archive
- introduction.html
- support.html
- system-requirements.html
- upload.png
- style.css
The resulting TOC will have no hierarchy levels. It will look like this:

Some of the HTML files reside in a subfolder
In our example, the Introduction folder contains the introduction.html and support.html files.
- Introduction
- introduction.html
- support.html
- system-requirements.html
- upload.png
- style.css
After the import, the new Project will have one folder-type node without a topic (corresponds to the Introduction folder) with two child nodes - Introduction and Support.

In case you want to create a parent node with some content inside rather than having folder-type nodes without a topic, you need to rename the HTML file to be turned into the parent node to index.html.
- Introduction
- index.html
- support.html
- system-requirements.html
- upload.png
- style.css
In this case, the
Introduction
node will become a regular topic, and its content will be taken from the index.html file.
HTML Character Encoding
To make sure the HTML content is processed correctly, it is strongly recommended to specify the Character Set in your source HTML files.
There are various character encodings. One and the same character can look different in different character sets. It is a general recommendation for HTML coders to specify the character set of their file in the file content. This can be done easily by adding a special meta tag to the HTML file:
- HTML4 : <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
- HTML5 : <meta charset="UTF-8">
To learn more on HTML character sets, check this W3Schools document: http://www.w3schools.com/html/html_charset.asp
If you see some strange characters after the HTML or CHM import, this means that the character set is not specified in the source files. Specifying it will help ClickHelp process all the characters correctly.
If no character set is specified, UTF-8 is assumed by default.