Add custom link to table of contents

While the options in Add links to your table of contents have largely been about built-in features, you may also want to add links to your table of contents that point to resources outside of KnowledgeOwl.

You can add these links in two ways:

• Use a redirect category: To add a link anywhere in your content hierarchy, create a URL redirect category with the link of your choice. Use the regular Articles controls to choose where this link appears. Refer to URL redirect categories for more detailed instructions.
• Script to add a link to the very top or bottom: Redirect categories are the easiest way to add external links, but these categories still have to display within the content hierarchy. If you want to add a link to the very top of your table of contents, above Home and other built-in features, or to the very bottom of your table of contents, they don't work. For this situation, we add a script to insert the link and a relevant icon. Continue following instructions on this page to learn more about this approach.

As our example: if you're using the Contact form, you might want to add a link to the contact form at the very top of your table of contents, like this:

Custom "Contact Support" link at the top of our table of contents

Before you begin

Before you begin, you'll need a few things:

• The link you'd like to add to your table of contents:
  • For any external link, enter the full URL, including https://. For example: href="https://www.knowledgeowl.com/terms-and-conditions"
  • To link to a page within your knowledge base, grab the relative path to the page. The relative path should begin with the /help, /docs, or /home in your URL followed by the URL you want to direct people to. For example, href="/help/add-a-category"
  • To link to your Contact form, as we're doing in our example, we'll use the relative link to the contact form: href="/help/contact-us", href="/home/contact-us", or href="/docs/contact-us". Choose the one that matches your knowledge base setup.
• A free Font Awesome icon you'd like to use for that link. We already have a few icons used, like home, or the book used next to glossary. You'll need to know the Font Awesome class for the icon. If you haven't worked with Font Awesome before:
  1. Open Font Awesome.
  2. Search for the icon you want.
  3. Select the icon to open its details.
  4. From the HTML code snippet, copy the final fa-xxxx portion. For example, if the full HTML code snippet is: <i class="fa-solid fa-phone"></i>, the part we need is fa-phone. This gives us the icon class we need to display the icon properly in KnowledgeOwl.
• Where you'd like the link placed. We provide three script options to handle these placements:
  • At the very top of the table of contents, above all other links (including Home, if it's enabled)
  • Below the Home link but above everything else in the table of contents, if Home link is enabled
  • At the very bottom of the table of contents

Setup

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Select Body from the Select HTML section to edit dropdown.
4. Copy the script below that matches where you want to place your link and paste it into the Body HTML pane:
   1. Very top: Use this script to add your link to the very top of your table of contents, above the Home link:

      <script>
        //Add a custom link to top of table of contents, before Home link
        $(function(){
          $(".documentation-outter-list").prepend('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container"><a href="www.mylinkurl.com"><i class="home-icon fa fa-life-ring"></i></a><a class="documentation-category" href="www.mylinkurl.com">My Link Text</a></div></li>');
        });
      </script>

   2. Below the Home link: Use this script if your table of contents has the Home link and you'd like this new link to appear right below the Home link:

      <script>
        //Add a custom link to top of table of contents, after Home link
        $(function(){
          $(".documentation-outter-list li:eq(1)").before('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container"><a href="www.mylinkurl.com"><i class="home-icon fa fa-life-ring"></i></a><a class="documentation-category" href="www.mylinkurl.com">My Link Text</a></div></li>');
        });
      </script>

   3. Very bottom: Use this script to add your new link at the bottom of your table of contents after your final category:

      <script>
        //Add a custom link to bottom of table of contents
        $(function(){
          $(".documentation-outter-list").append('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container"><a href="www.mylinkurl.com"><i class="home-icon fa fa-life-ring"></i></a><a class="documentation-category" href="www.mylinkurl.com">My Link Text</a></div></li>');
        });
      </script>

5. Update the links in row 4: Update  <a href="www.mylinkurl.com"> and <a class="documentation-category" href="www.mylinkurl.com"> to match the URL you want to send to. Refer to the guidance in Before you begin for help constructing the link, especially if you're linking to a resource within KnowledgeOwl.
6. Update the text in row 4: Change My Link Text to be the actual text you want used for the link, for example: Contact Support.
7. Update the Font Awesome icon in row 4: Replace fa-life-ring with the Font Awesome icon class you want to use. Refer to the steps in Before you begin for more information.
8. Optional: We like to update the comment in row 2 to better reflect which custom link it is, but this isn't required!
9. Be sure to Save your changes once you're done.

For example, this code will create a Contact Support link at the very top of our table of contents using the Font Awesome phone icon for a knowledge base that uses the /home/ root path:

<script>
  //Add a custom Contact Support link to top of table of contents, before Home link
  $(function(){
    $(".documentation-outter-list").prepend('<li data-type="category" class="category-container nav-header nav-header-sub level-0"><div class="category-link-container"><a href="/home/contact-us"><i class="home-icon fa fa-phone"></i></a><a class="documentation-category" href="/home/contact-us">Contact Support</a></div></li>');
  });
</script>

And here's how it displays in our table of contents:

Sample output of the script: a Contact Support link with a phone icon at the very top of our table of contents