Question

How to Display a Table of Content page for Solution Articles


Looking to understand how to us html to, display a single solution article on freshdesk’s customer landing page.
This single article is a table of contents, with pertinent groupings for each article.

Any help on how to reference one article and display it on the landing page would be appreciated. 


5 replies

Userlevel 2
Badge +9

Hi FreshVert,

Unfortunately, it isn’t quite clear what you mean. Can you show a mockup to understand what exactly you want? You can attach it here or send it to hello@breezythemes.com.

Yes it would be great to be able to link to different parts of the same page using what is referred to as an anchor link https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html

FreshDesk apparently offers a Table of Contents feature out of the box
https://support.freshdesk.com/en/support/solutions/articles/50000002051-using-advanced-formatting-options-in-the-knowledge-base#A-quick-guide-to-using-Table-of-content


It is trivial to do an anchor, but i have found i CANNOT set an ID on any HTML element in FreshService
if i give an elemet an ID and save/publish. Freshservice strips away the ID from that element.

 

Adding to this. Our organization also wants this feature and arrived at the same dead end.

 

Support has confirmed there is an existing feature request for this, but they do not have any ETA for implementation. We have opened up a ticket about this and will be working with our account manager in the hopes of expediting a resolution.

This topic is a bit old, but maybe it will help someone else. 

Unfortunately, there is currently no integrated option to insert a table of contents into a knowledge base article. However, in order to ensure the user-friendliness of long articles, an html version can be added manually.

 

Html Code logic for a Table of Content

You need to switch to the code view of an article first. 

<h2 id="Table_of_Content">Table of Content</h2>

<ul style="list-style-type: circle;">
<li><a href="#Step_1_Header">Step 1: Header</a></li>
<li><a href="#Step_2_Header">Step 2: Header</a></li>
<li><a href="#Step_3_Header">Step 3: Header</a></li>
<li><a href="#Step_4_Header">Step 4: Header</a></li>
<li><a href="#Step_5_Header">Step 5: Header</a></li>
</ul>

 

The following code must be used for the headings so that the assignment can take place correctly. 

<h2 id="Step_1_Header">Step 1: Header</h2>

 

After you have assign the table of content to the headings, you can also use a direct link to a specific heading in a knowledge base article. 

To display a single solution article from Freshdesk on your customer landing page, you can obtain the article ID from your Freshdesk Knowledge Base and create a hyperlink to it on your landing page. Here’s how:

  1. Get the Article ID:

    • Log in to Freshdesk.
    • Navigate to the Knowledge Base and find your article.
    • The article ID is usually in the URL after /solution/articles/.
  2. Create a Hyperlink:

    • Use the following format to link directly to your Freshdesk article:
       
      ruby

      Copy code

      https://yoursubdomain.freshdesk.com/support/solutions/articles/{article_id}

      Replace {article_id} with your actual article ID.
  3. Display on Landing Page:

    • Create a hyperlink on your landing page with descriptive text that directs users to the Freshdesk article.

This method allows users to navigate directly to the specific article when they click on the hyperlink.

Reply