loading Loading...
add chat to your website

Importing Content into ProProfs Knowledgebase

‚ÄčInstantly turn your Word documents and HTML files into articles in the knowledge base by using the import function. You can also import existing pages from other help-authoring tools such as RoboHelp, FrameMaker or even your website, in a few easy steps.  

 

The import function allows you to upload a zip (.zip) file containing HTML files, images, and CSS into ProProfs Knowledgebase. If you are importing from another system such as FrameMaker, you must first save the pages as HTML before importing them.


Before Importing

Importing is always tricky because complex data must be transferred between different applications. Do a trial run first: before importing your entire site, test only a small sample of five pages or so.

Preparing the Files

The import function will allow you to upload a zip (.zip) file of HTML files, images, and CSS into ProProfs. The HTML pages may be exported from a website or a help-authoring tool such as RoboHelp or FrameMaker. The importer will only import HTML pages (.html, .htm), images (.jpg, .png, .gif), and CSS (.css). All other files (such as JavaScript, PHP, and server side files) will be ignored.

 

Images will be imported if they are referenced by your HTML files and the option Import linked images is checked. It is similar for CSS stylesheets but by default, they are not imported. Please uncheck the option Do not import CSS Style in the Import page so that the CSS files referenced by your HTML files will be imported.


The first step of the import process is to zip the files.

  1. Locate the files you wish to zip on your computer.
  2. Select all the files you want to zip. Right-click on any of the files (making sure all the files are still selected), select Send To, and another box will open. Click Compressed (zipped) Folder. A new folder with a zipper image on it will appear in the same area (i.e., the desktop or folder in which the original item was saved). This is your new zip file/folder.

 
Now that you have zipped your files, you can begin the import process.

The Import Process

To start the import process, follow these steps:

  1. Log in to your account (as an administrator) and click Settings.
  2. Click Import Files.
  3. Select the site you want the files imported into.

The import page will now appear.

Upload the Zip File

The next step is to upload the zip file you have prepared.

  1. Click the Browse button.
  2. A new window opens. Now browse your computer for the zip file. Find the file, select it, then click OK. A progress indicator will appear as the file uploads. Depending on the size of the file this could take several minutes.
  3. Once the file has uploaded successfully, the name of the file will appear in the field.

Directories to Exclude

  • You have the option of entering the names of folders (or "directories") that will not be scanned for files to import.
  • Paths to specific directories will not work, such as folder/images.
  • To exclude a folder, simply enter that directory's name to this list. This way, if you have 12 directories called "images" at various levels in your directory hierarchy, you can skip all of them.
  • If you have several directories that share a name, like "media," and you need to skip some of them but import one or two, rename the directories you want to keep while you run the import.
  • Enter the directory names without slashes and separated by commas, such as "images,skin,ssl"

Select Specific Content (HTML Tags)

 

Many times the HTML pages you want to import already have a header, navigation, footer, etc. Instead of importing the entire webpage, you can target specific content using HTML tags. For example, let's say this is your webpage below. Since ProProfs already has navigation and a header, you wouldn't want to import these elements.  Instead you can choose to only import specific content areas.

  • To select the part of the page you want to import, specify either the HTML Tag or DreamWeaver template region.
  • If your pages are based on Dreamweaver templates, select the Dreamweaver template option and enter the name of the content area (e.g., “Main Content”) into the template region field.
  • For HTML tags, if you’re using a tag without attributes, or for which attributes don’t matter, simply enter the tag (without brackets) in the Tag field, and leave the Attribute and Value fields blank. For example, if you need to import the entire <body> tag, your fields would look like this:

  • If your tag has an attribute that makes it unique, enter the attribute name (like class or id) in the Attribute field and the value in the Value field. For example, if your content is contained in the <div id="content"> tag, your import setting would look like this:

 

 

  • Table cells will work too, even if they don't have a class or ID, as long as they do have a width attribute with a unique value. For example: Tag: table, Attribute: width, Value: 730 will work just fine.
  • Firebug makes it easy to find the right tag. Open it, press the arrow   button, and hover your mouse over the section you want to import. It will highlight the appropriate tag in the HTML view.


 

Other Options

 

Import Linked Images
  • With this option checked, the importer will attempt to copy the images to your Image Library.
  • It will only import images that are sourced in the HTML code. If an image is not being used in your HTML files, it will be ignored.
  • It will replace the src="" paths in all your image tags with the new path.
  • It will check for duplicates, so that images used in several pages will be imported just once.
  • Linked images will be imported no matter where they are located. It's fine to leave images in your excluded directories, since that setting just tells the importer where to look for HTML files, not images.

 

Update Internal Links
  • With this option checked, the importer will attempt to update all the links between pages.
  • So if you have pages that are hyperlinked to each other, the importer will fix those links so they work in ProProfs.

 

Convert Special Characters
  • If your original files used a character set other than UTF-8, you should check this option to convert special characters.

 

Do not import CSS Style
  • Keep this checked if you want don't want any CSS to be imported into ProProfs. If unchecked, any linked CSS stylesheets from your HTML files will be appended to the site CSS. The latter usually requires manual cleanup so that only style codes that affect the content will be in your site CSS.
  • Always check this option if you are importing files into the site multiple times since this would add CSS each time you import resulting in duplicate CSS entries.

 

Remove all inline styles and formating
  • Keep this checked if you want all style attributes in HTML elements stripped out. This makes sure your resulting pages will just use the site CSS which is easier to maintain.

 

Create a new folder for imported pages
  • Keep this checked so that new pages from import are kept in an 'Import' folder. Unchecking will put all the imported pages in the root of table of contents.

 

Clean up Bad HTML
  • You can have the importer clean up any HTML that is not needed. For example, if your files came from Microsoft Word or Frontpage, they’re probably littered with extraneous tags, smart tags, and class attributes.
  • To clean them up, check the Clean up bad (Word, Frontpage) HTML option; then specify the HTML tags and attributes that should be allowed. Any tags and attributes not in these lists will be removed. A list of suggested tags and attributes is provided, along with an extra set that you should include if your content contains data tables.
  • Note that style and align are not among the attributes allowed by default, which might be important to you.

 

 

Page Conflicts

At the bottom of the Import page, the Conflict option allows you to choose how the importer will handle HTML files that match existing ProProfs pages. These options are:

 

Ready to Import

Once you have all the settings filled in, click Start Import to begin the import process.

If you're importing a site with many files, this will take a few minutes.  Please be patient and do not click on anything during the process.  If the import process times out, then split the files up into two or more zip files and import them separately.

When the import has finished, it will display a list of the imported files. Click Done when finished.

CSS

If you choose to import the linked CSS, the system will add all external CSS that is linked within the HTML files to your ProProfs site's CSS. You can easily review all the new CSS code added to your site by editing a page and then clicking the CSS icon from the toolbar as shown in image below:

Notice the new items appended at the bottom of the CSS. A comment will indicate the timestamp of import and the CSS code that was added. 

 

Here are some potential issues: 

 

Conflicts - Imported CSS may conflict with your sites CSS styles. For example if you have a certain heading style H1, your newly imported CSS may also have a H1 heading style which would then conflict with the site's CSS. It is best to review your site's CSS in order to remove and collate any duplicates or Pseudo-classes

 

Multiple Imports and Duplicate CSS - Each time you import into a site, it will repeat the process above. You may end up with duplicate CSS especially if you imported 2 or more sets of files that reference the same CSS file. Having duplicate CSS is a non-issue at first but may consume your time if you will need to change a CSS style that is referenced in 2 or more places as that will require you to edit all of them. Best practice will always be to collate all your files and just do one import, or remove the newly add CSS after you complete the import.

 

Inline CSS and formating - In addition to external CSS, the imported HTML files may have inline CSS in the HTML tags. Inline CSS code will override any CSS statements you have in the sites CSS. If you notice a newly imported element is not styled the same as other elements in your site, such as a table, then you can use the 'Remove Format' feature in the toolbar as shown below. All you have to do is highlight the element and click 'Remove Format' to remove all inline CSS.

Cleaning Up

No matter how careful you were with the settings, there’s a good chance you’ll see some errors in your newly imported content. You’ll probably need to change some of the pages' formatting. You can also use the view all pages bulk update feature to change more than one page at a time.

Deleting an Import

It is possible to roll back and delete an entire import. The delete last import option permanently deletes the data from your site so that you can import the data again. This is useful in situations when a site is not imported properly and you prefer to import the same site again.

 

  • Create a new page if the page already exists - Select this option if you want new pages to be created. 
    • Update existing pages with imported pages of the same page title or URL - Select this option if you want your imported pages to update your existing pages in ProProfs.
    • Match Criteria: 
      • An HTML file matches a ProProfs page if the text within the file's HTML title tag is the same as the ProProfs page's title
      • An HTML file's name is the same as the URL fragment (the text that comes after the mysite.helpdocsonline.com/ in the page's URL).
    1. Log in to your account (as an administrator) and click Settings.
    2. Click Import Files.
    3. Select the site from which you want to delete the last import.
    4. Select delete last import.
    5. Confirm by selecting Yes.
  • Note: This will delete all pages, table of contents, CSS, and images from the most recent import.