Related Articles Widget

Our Related Articles widget allows you to display articles that have content related to the current article the reader is reading. This will increase your readers' engagement and  your ability to get them the answers they need.


How Does It Work?

It's as simple as placing a merge code wherever you would like in your knowledge base! KnowledgeOwl will then search, behind the scenes, for up to 5 articles that have content that is related to the content where the merge code is present.

If you are not happy with the results, you can specify which articles to display as related within each article. To do so click the Add Related Article button in the right column of an article.

Type the article title, select it and click Add Related Article.

This will replace one of the system-determined related articles with the article you specified. User-specified articles will display above of system-determined articles.

Once you have a few articles added, you can reorder them using the arrow icon or delete them using the red x.

Setup

Setting this up is easy! The below merge code is nearly all you need.

[template("related")]

Add the Related Articles Widget to All Articles

You can place the related articles merge code in the HTML of all articles. Go to Settings > Style > Custom HTML and select Article. 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.

You'll probably also want to add a header to display above the related article links as well and perhaps a div with a class so that you can style the related articles widget.

Something like the following should do:

<div class="related-articles">
 <h3>Related Articles</h3>
 [template("related")]
 </div>

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, edit the article and click the Source button in the top right of the editor toolbar.

Scroll to the bottom of the article and paste the merge code.

You'll probably also want to add a header to display above the related article links as well and perhaps a div with a class so that you can style the related articles widget.

Something like the following should do:

<div class="related-articles">
 <h3>Related Articles</h3>
 [template("related")]
 </div>

Add the Related Articles Widget to the Right Column of Your Knowledge Base

Finally, you might decide to display the Related Articles Widget in the right column of your knowledge base. This column was designed just for this kind of content!

To do so go to Settings > Style > Custom HTML and select Right Column and paste the merge code.

You'll probably also want to add a header to display above the related article links as well and perhaps a div with a class so that you can style the related articles widget.

Something like the following should do:

<div class="related-articles">
 <h3>Related Articles</h3>
 [template("related")]
 </div>