One of the challenges facing content creators is making sure that readers understand common terms, acronyms, and abbreviations without disrupting the flow of content. At its worst, editors are left defining a term once and linking back to that, or repeatedly manually adding definitions into the body of their articles by copying and pasting or retyping, which is either redundant work or potentially inconsistent work.

That's why KnowledgeOwl has a built-in Glossary (Knowledge Base > Glossary). Here, you can define the terms, acronyms, and abbreviations used in your documentation. You can opt to automatically highlight glossary terms a set number of times in articles, or to manually insert definitions as you create content.

Highlighted glossary terms get a double underline in articles and the definition will appear in a pop-up when readers hover over that term:

Screenshot showing a sample glossary term with double underline and on-hover definitionSample glossary term underlining and on-hover definition

The glossary feature is a great way to improve consistency in your documentation while minimizing redundant work and keeping your docs looking clean.

Populate the glossary

You can populate your glossary under Knowledge Base > Glossary. There are two ways to add terms:

  1. One at a time:
    Click Add Term to manually add a glossary term and its definition.
  2. In Bulk:
    Click Import Terms to add glossary terms in bulk from a csv file.  There is an example csv file here you can use as a template.

Glossary terms will automatically be displayed in alphabetical order. When your glossary gets larger, you can use the search feature to quickly find a term.

View the glossary

The glossary is a default page in every knowledge base. Its permalink is always "glossary", so you can get to the glossary by going to "/help/glossary" in your knowledge base (or "/home/glossary" or "/docs/glossary" if you are using a different root path).

For example, here is the glossary page for our help and documentation (we haven't set ours up yet so you'll only see some test terms): 

If you are ready to share your glossary with your readers, you can add it to the table of contents under Settings > Basic > Website Settings  > Table of Contents > "Add a glossary link to the top of the table of contents".  You can also manually link to it from your top navigation, home page, or articles using the link "/help/glossary".

Provide definitions in articles automatically

Once you have set up glossary terms, you can automatically provide hover-over definitions for these terms in your articles. You can turn on this option under Settings > Basic > Website Settings > Glossary Terms > "Automatically highlight the first glossary terms that appear in an article".

You can choose how many glossary terms should be automatically highlighted.  To prevent readers from being overwhelmed by tons of underlines, we limit you to 10 automatically highlighted terms per article. We will only highlight the first instance of each terms, so if you choose to highlight the first 3 terms, only the first instance of each of first 3 glossary terms will be highlighted.

For automatic highlighting to work, the terms in the articles must exactly match the terms in the glossary. If your article contains variations of a term, you can manually create a link to the glossary definition.

Add glossary definitions in articles manually

In addition to automatically highlighting up to 10 glossary terms per article, you can also manually set up glossary definitions.  Manually setting up the glossary definitions give you the most control as you can specify when and where you want to define terms. It also allows you to provide definitions for variations of a words whereas the automatic highlighting must be an exact match.

To provide a definition for a term in an article,

  1. Make sure the glossary term and definition exist in the glossary. New terms can be added under Knowledge Base > Glossary.
  2. Highlight the word or phrase you want to provide a definition for, and click on the Add Glossary Term icon in the editor.
  3. Search for and select the glossary term, and optionally customize the text to be displayed. Once you insert the glossary term, you will see a double underline in the editor and the hover-over definitions can be viewed in preview or using the live link.

Customize how glossary terms look

The default highlighting of a glossary term looks like this: test

You can customize the look and feel of your glossary terms using css. Here's the code for the default double underline which you can customize and add under Settings> Style > Custom CSS:

.ko-glossary-term {
border-bottom: 3px #bbb double;

The hover-over definition can also be customized.  Here's the default styles:


The popover is done using Bootstrap. See their popover documentation for more options.

Keep glossary header visible when scrolling

Here is some code to keep your glossary header visible when scrolling.

Copy and paste this script into the bottom of Settings > Style > Custom HTML > Body.  This script will keep the Glossary header and letters visible as you scroll. You will need to adjust the highlighted pathname based on your knowledge base's settings (/help/glossary vs. /home/glossary vs. /docs/glossary).


//only on glossary
//Adjust the pathname listed below depending on your KB settings. It might be 'help/glossary', '/home/glossary' or '/docs/glossary'
if(window.location.pathname == '/help/glossary') {
if($('.ko-content-cntr').length > 0)
var articleCont = $('.ko-content-cntr');
var articleCont = $('.documentation-article');
var articleWidth = articleCont.width();
var navTop = $('.hg-header').outerHeight(true);
  var topDiv = $('<div/>', {class: "ko-glossary-topdiv"});
var topOfJumpto = topDiv.offset().top;
var jumptoHeight = topDiv.outerHeight(true);
offset: {
top: topOfJumpto - navTop,
//add dynamic reusable styles
$('<style>.ko-glossary-topdiv.affix{top:'+navTop+'px;width:'+articleWidth+'px;background:#fff;}.ko-glossary-topdiv.affix + .glossary-terms-wrapper{margin-top:'+jumptoHeight+'px}</style>').appendTo('head');

Copy and paste this CSS into Settings > Style > Custom CSS to make sure the sections are visible when you click are the links to jump to a section. Without this CSS the letter you jump to might get covered by the header.

.hg-glossary-page a:not([href]) {
display: block;
height: 200px;
margin-top: -200px;
visibility: hidden;

Add search to the glossary page

You might want to add a search box to your glossary page if you:

  • Have a lot of glossary terms
  • Have readers who frequently reference your glossary
  • and/or have a link to your glossary in your table of contents

We've worked up a code snippet that:

  • Creates a search box at the top of the Glossary with "Search glossary" placeholder text
  • As you type to search, it will collapse glossary letters/sections with no matches and highlight terms that match your search phrase in yellow (you can change this color)

Here it is in action with the default settings:

Create the snippet and add it to your knowledge base

To add this search box to your glossary:

  1. Go to Library > Snippets.
  2. Click the + Create New Snippet button.
  3. This will open a Snippet details screen. Give your snippet a Name, like "Glossary Search".
  4. Give your snippet a Description, like "This snippet adds a search box to the glossary."
  5. In the Snippet Content section, click the dropdown to select the Code Editor.
  6. Copy the code below and paste it into the Code Editor window.
      if($('.hg-glossary-page') && $('.hg-glossary-page').length >= 1) {
        $('.page-header').append('<input type="text" id="glossary-search" placeholder="Search glossary">');
          var term = $(this).val().toLowerCase();
            if ($(this).text().toLowerCase().indexOf(term) > -1) {
            else {
    <script src="//">
      /* Style the search box */
      #glossary-search {
        height: 28px;
        font-size: 14px;
        float: right;
        width: 300px;
        padding: 2px;
      /* Highlight color for search term matches */
      .highlight { 
        background-color: yellow;
  7. Once you're done, click the Create button in the upper right.
  8. So a completed snippet might look like this:
  9. Once your snippet is created, copy the snippet Merge Code Value.
  10. Go to Settings > Style.
  11. Below the preview pane, click on Custom HTML and be sure the Body is selected.
  12. Paste your merge code in at the bottom of your Custom HTML Body (or between scripts), and save.
  13. You should now have a search box on your glossary page!

Common tweaks

Once the snippet is working, you can make changes to the snippet to adjust the style:

  • Change the placeholder text: In the first script, find this line:
    $('.page-header').append('<input type="text" id="glossary-search" placeholder="Search glossary">'); 
    and replace "Search glossary" with the placeholder text you'd like to use, for example:
    $('.page-header').append('<input type="text" id="glossary-search" placeholder="Start typing to search glossary...">');
  • Change the highlight color: in the style section, replace the .highlight background-color with a color of your choice, for example:
      /* Highlight color for search term matches */
      .highlight { 
        background-color: #80bd01;
  • Change the style of the search box: you can change the height, font-size, width, etc. by updating the appropriate values in the style section's #glossary-search styles.

Glossary FAQs

Can you add links to articles in glossary definitions?

Yes, you can add links in your glossary definitions using plain html. 

Here's an example of what it might look like: 

This is the definition. For more information, see <a href="/help/amazing-article"> this amazing article</a>.

Can  you style text in glossary definitions (bold, italics, etc.)?

Yes. The glossary term definition page will accept HTML for:

  • Bold <b>
  • Italics <i>
  • Underline <u>
  • Hyperlinks <a>
  • Superscript <sup>
  • Subscript <sub>
  • Paragraph breaks <br>
  • Strong <strong>
  • Emphasis <em>

Use plain html format to add these.

Can you add images to glossary definitions?

No. We prevent images from being added because they often don't format well in the pop-overs and can lead to broken HTML. We recommend inserting a link to the image in the definition, instead.

Do glossary items show up in search?

Not right now but we do have a feature request to add the glossary to search results.   Contact us if you are interested in this feature and we can add you to the list!

Can you add synonyms for glossary terms?

You can add synonyms as part of a definition or add synonyms as separate terms with text like "See xyz". We recommend defining the most commonly used term and listing synonyms in the definition. You can always manually provide definitions for the synonyms in articles using the Add Glossary Term option.


This is a definition. Synonyms: this, that, the other thing

 We do have a feature request to add a synonyms feature.   Contact us if you are interested in this feature and we can add you to the list!

Can you link from one glossary term to another?

Not currently. You can alternatively use text like "See also: this, that, this other thing" or link to an article.   Contact us if you are interested in this feature and we can add you to the list!

Can you have more than one glossary?

Each knowledge base has a single glossary that is used for the glossary page as well as providing contextual definitions. If you need multiple glossaries, you can alternatively create separate articles for the separate glossaries. We can make the page look and function like the glossary. Contact us and we can help you get it set up!

Can you share a glossary between multiple knowledge bases?

We don't currently have a way to share a single glossary across multiple knowledge base. However, you can create a glossary in one, export the terms, and import them into other kb. You will need to manage the glossary for each knowledge base independently. 

Can you insert the full definition into an article as plain text rather than a popover?

Not currently but we do have a feature request to create a merge code or snippet for glossary terms.   Contact us if you are interested in this feature and we can add you to the list!

Can you prevent a term from being highlighted in a particular article?

If you want to prevent a glossary term from appearing highlighted in a particular place, go to the Code View and put a span tag around part of the word. For example, if you have a glossary term for an acronym like ARE but you want to prevent highlighting on something like: "These are the instructions":

These a<span>re</span> the instructions

This will prevent the glossary term highlighting.