Installing and customizing the Table of Contents

This extension generates a table of contents for your articles automatically, allowing your visitors to navigate the page easily.

By default, it displays links for every <h2>, <h3>, <h4>, <h5> headings in your article content. You don't no need to copy and paste any HTML or make changes to your article content.

For our clients, we provide a free installation service of our extensions. You can also install an extension by yourself if you like. It is very simple. Use the following instructions.

Installation Usage
  1. Unpack the downloaded zip file. There will be three files:

    • toc-min.js
    • toc.css
    • Readme.txt
  2. In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.

  3. Click the theme you want to edit to open it.

  4. Click the Edit code button.

  5. In the Assets section, click Add asset, then browse to select your files.

    Select all *.js and *.css files from the unpacked zip.  The files are added to your list of asset files.

  6. In your theme code configuration page under the templates directory, click the document_head.hbs file.

  7. In the document_head.hbs file, paste the following snippet:
    <link rel="stylesheet" href="{{asset 'toc.css'}}" />
    <script src="{{asset 'toc-min.js'}}"></script>
  8. (optional) If you don't use one of our themes if need to add the following line to the article_page.hbs template:
    <div data-toc></div>
  9. Click Publish. The table of contents navigation is displayed in articles.

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $699 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us