Related Articles

How it works

When you use related articles, behind the scenes, KnowledgeOwl searches and displays up to five articles that have content related to the content you're looking at.

By default, this will happen automatically based on article title.

You can specify which articles or categories should be displayed within an article by using the Add Related Article option in the editor.

You can also disable the automatically suggested articles across your entire knowledge base.

If you keep automatically suggested articles and use some manually specified articles, the knowledge base will always try to display five related articles:

  • When you have 0 manually specified Related Articles, up to 5 automatically suggested articles will be displayed.
  • When you have 1-4 manually specified Related Articles, it will display a maximum of 5 articles, filling in the empty slots with automatic suggestions (where it can find them).
  • When you have 5 or more manually specified Related Articles, only those will be displayed.

Note: automatic suggestions are created using keyword matching between articles; if the system can't find enough matches, it won't display the full five articles.

So, for example, let's say I have an article which has three Related Articles manually specified:

Sample related articles in editor

When I view this in the knowledge base, I'll see those three articles first, in the order I selected. Automatic suggestions will try to fill the remaining two spots:

Sample shown on knowledge base

You'll see that the automatic suggestions help fill this to a total of five, but they aren't always the best resources to suggest. If you want to have total control over what's displayed, you'll want to disable the automatic suggestions across your entire knowledge base.

Where do Related Articles show up?

For all new knowledge bases, Related Articles are enabled and added to your global article template by default.

If you're using a custom theme, you may need to add the Related Articles section to all or specific articles. You'll need this merge code:

[template("related")]

You can add this merge code to all articles, the right column of your knowledge base, or to specific individual articles. Instructions for each are below.

Add the Related Articles Widget to all articles

You can place the related articles merge code in the HTML of all articles:

  1. Go to Settings > Style.
  2. Below the preview window, click on Custom HTML and select Article
  3. You can place the merge code after the article body merge code or in the hg-article-footer div. Either of these locations will display at the bottom of each article. (The default placement is in the hg-article-footer div.)
  4. You'll probably also want to add a header to display above the related article links and perhaps a div with a class so that you can style the related articles widget. Something like this should do:
    <div class="ko-related-articles">
     <h3>Related Articles</h3>
     [template("related")]
     </div>
    So your completed template might look like this:
    Sample of Related Articles template in Article Custom HTML
  5. Be sure to Save after you've added the template.

Add the Related Articles Widget to the right column of your knowledge base

If you're using the right column of your knowledge base, you can also display the Related Articles widget there. This column was designed for this kind of content. To add it here:

  1. Go to Settings > Style.
  2. Below the preview window, click on Custom HTML and select Right Column
  3. You can place the merge code after the article body merge code or in the hg-article-footer div. Either of these locations will display at the bottom of each article. (The default placement is in the hg-article-footer div.)
  4. You'll probably also want to add a header to display above the related article links and perhaps a div with a class so that you can style the related articles widget. KnowledgeOwl has some existing classes for styling the right column's panels, so something like this should do:
    <div class="panel panel-default right-col-panel related-panel">
        <div class="panel-heading">Related Articles</div>
         [template("related")]
    </div>
    Your completed template might look like this:
    Sample of Related Articles template in Right Column Custom HTML
  5. Be sure to Save after you've added the template.

Add the Related Articles Widget to individual articles

If you only want to display the related articles widget in certain articles you can place the related article merge code at the bottom of individual articles. To do so:

  1. Open the article in edit mode.
  2. You can place the merge code anywhere in the article, though most folks put it at the bottom of the article: 
    [template("related")]
  3. You'll probably also want to add a header to display above the related article links. You can style this section using the WYSIWYG editor or the Code View--whatever you're more comfortable with.
    Your completed article might look like this:
  4. Remember to Save the changes to your article.

Adding Related Articles

If you would like to guarantee specific Related Articles are displayed, you can specify which articles or categories should be displayed within an article:

  1. Open the article or category in edit mode.
  2. Click the Add Related Article button in the right column of the editor.
    Add Related Article button
  3. Type the article or category title you'd like to add as a related article. The dropdown will autosuggest articles or categories based on what you've typed.
  4. Select the correct article or category and click the Add Related Article button.
    Example of adding a Related Article
  5. Save the article.

Reordering or removing Related Articles

Once you have two or more Related Articles added, you can reorder them using the arrow icon or delete them using the red x.
Reordering or removing Related Articles


Enabling and disabling automatic suggestions for Related Articles

If you want to show only manually specified Related Articles, you can turn off automatic suggestions across your entire knowledge base. To do so:

  1. Go to Settings > Basic.
  2. In the Website Settings section, uncheck the box next to "Automatically suggest related articles based off of the article titles".
  3. Save.

If you've previously disabled automatic suggestions and want to turn them back on, check that box and save.


Backward suggest Related Articles

If you're using manually specified Related Articles, you can save yourself a little bit of work using a knowledge base-wide setting to "Backward suggest articles."

When you add a Related Article to an article, by default, that only edits the related articles section for one article: the one you're currently editing.

Backward suggest basically says:

I'm editing Article A. If I add Article B as a related article:

  • Without backward suggest, if I view Article B, I won't see Article A in the Related Articles section unless I specifically add it there.
  • With backward suggest, if I view Article B, I will see Article A in the Related Articles section, even though I never specifically added it there.

Basically, backward suggest says: I should mirror all related article relationships automatically.

Backward suggestions are disabled by default. If you'd like to turn them on:

  1. Go to Settings > Basic.
  2. In the Website Settings section, check the box next to "Backward suggest articles which list the current articles as related."
    Backward suggest articles setting in Settings > Basic
  3. Save.

Hide Related Articles section from a specific article

If you've added the Related Articles template to your article template globally, sometimes it's useful to be able to hide it from specific individual articles. For example, maybe you are using automatically suggested related articles overall, but this particular article, the suggestions don't make sense (perhaps this article contains your company W9 and everything it's suggesting as related is product documentation, for example).

For this scenario, we recommend creating a snippet that will hide the Related Articles section and then only adding that snippet to the specific articles where you want to hide the section. First, create the snippet:

  1. Go to Library > Snippets.
  2. Click on Create New Snippet.
  3. Give your snippet a name, like "Hide Related Articles."
  4. Give your snippet a description, like "Use this snippet in articles to hide the Related Articles section."
  5. Click the dropdown to change the editor to the Code Editor.
  6. Copy the code below and paste it into the Code Editor window in your snippet.
    <style>
      /* Hide related articles */
      .ko-related-articles {
        display:none;
      }
    </style>
    Your completed snippet should look something like this:
    Sample snippet to hide related articles
  7. Click the Create button.

Now that your snippet exists, any of your content writers or editors can add it to an article using the Insert snippet option.

Troubles creating your snippet? Review the instructions on creating a snippet for more help.

Optional tweak to hide horizontal line

If your Related Articles section is the only thing in your article footer, and hiding it leaves behind a mystery grey line, you can edit the snippet to include logic to hide that grey divider line, as well. The structure depends on your theme; you may need to right-click on the divider line and Inspect Element to see which classes to use, but here's a sample for our Minimalist theme:

<style>
  /* Hide related articles */
  .ko-related-articles {
    display:none;
  }
  /* Hide grey bottom border of article body */
  .hg-minimalist-theme .hg-article-body {
    border-bottom: none;
  }
</style>

Sample snippet to hide Related Articles and the grey line

Hide Related Articles when there are none

This script hides your Related Articles panel when no Related Articles are present. 

To use these, copy the relevant code at the very bottom of the Article template (if you're not sure how to do this, see here).

Use this if your Related Articles appear in the right hand column:

<script>
$(function() {
if( $('.related-panel ul li:eq(0)').text().trim() == "None" )  
$('.related-panel').hide();
});
</script>

Use this if your Related Articles appear below the article:

<script>
$(function() {
if( $('.ko-related-articles ul li:eq(0)').text().trim() == "None" )  
$('.ko-related-articles').hide();
});
</script>

Hide Related Articles when there is only one or less

This script hides your Related Articles panel when only one or no Related Articles are present. 

To use these, copy the relevant code at the very bottom of the Article template (if you're not sure how to do this, see here).

Use this if your Related Articles appear in the right hand column:

<script>
$(function() {
if( $('.related-panel ul li').length < 1 )  
$('.related-panel').hide();
});
</script>

Use this if your Related Articles appear below the article:

<script>
$(function() {
if( $('.ko-related-articles ul li').length < 1 )
$('.ko-related-articles').hide();
});
</script>